<!DOCTYPE html><html lang="en"><head>
  <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
  <meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name="viewport">
  <meta content="CR" name="w3c-status">
  <title>HTML 5.1: 10. Rendering</title>
  <link href="styles/styles-html.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href=styles.default.css>
  <meta content="Bikeshed 1.0.0" name="generator">

  <link href="styles/W3C-CR" rel="stylesheet" type="text/css">
 </head>
 <body class="h-entry">
  <div class="head">
   <header>
    <p data-fill-with="logo"><a href="http://www.w3.org/"><img alt="W3C" height="48" src="styles/logos/W3C" width="72"></a></p>
    <h1 class="p-name no-ref allcaps" id="title">HTML 5.1</h1>
    <h2 class="no-num no-toc no-ref heading settled" id="subtitle"><span class="content">W3C Candidate Recommendation, <time class="dt-updated" datetime="2016-06-21">21 June 2016</time></span></h2>
   </header>
   
   
   
   
  </div>
  
  
  
  
  
  <nav data-fill-with="table-of-contents" id="toc"><p class="prev_next">← <a href="xhtml.html#xhtml"><span class="secno">9</span> <span class="content"><span>The XHTML syntax</span></span></a> — <a href="index.html#contents">Table of contents</a> — <a href="obsolete.html#obsolete"><span class="secno">11</span> <span class="content">Obsolete features</span></a> →</p>
   <h2 class="no-num no-toc no-ref" id="contents">Table of Contents</h2>
   <ol class="toc" role="directory"><li>
     <a href="rendering.html#rendering"><span class="secno">10</span> <span class="content">Rendering</span></a>
     <ol class="toc">
      <li><a href="rendering.html#rendering-introduction"><span class="secno">10.1</span> <span class="content">Introduction</span></a>
      </li><li><a href="rendering.html#the-css-user-agent-style-sheet-and-presentational-hints"><span class="secno">10.2</span> <span class="content">The CSS user agent style sheet and presentational hints</span></a>
      </li><li>
       <a href="rendering.html#non-replaced-elements"><span class="secno">10.3</span> <span class="content">Non-replaced elements</span></a>
       <ol class="toc">
        <li><a href="rendering.html#hidden-elements"><span class="secno">10.3.1</span> <span class="content">Hidden elements</span></a>
        </li><li><a href="rendering.html#the-page"><span class="secno">10.3.2</span> <span class="content">The page</span></a>
        </li><li><a href="rendering.html#non-replaced-elements-flow-content"><span class="secno">10.3.3</span> <span class="content">Flow content</span></a>
        </li><li><a href="rendering.html#non-replaced-elements-phrasing-content"><span class="secno">10.3.4</span> <span class="content">Phrasing content</span></a>
        </li><li><a href="rendering.html#bidirectional-text"><span class="secno">10.3.5</span> <span class="content">Bidirectional text</span></a>
        </li><li><a href="rendering.html#quotes"><span class="secno">10.3.6</span> <span class="content">Quotes</span></a>
        </li><li><a href="rendering.html#sections-and-headings"><span class="secno">10.3.7</span> <span class="content">Sections and headings</span></a>
        </li><li><a href="rendering.html#section-lists"><span class="secno">10.3.8</span> <span class="content">Lists</span></a>
        </li><li><a href="rendering.html#tables"><span class="secno">10.3.9</span> <span class="content">Tables</span></a>
        </li><li><a href="rendering.html#margin-collapsing-quirks"><span class="secno">10.3.10</span> <span class="content">Margin collapsing quirks</span></a>
        </li><li><a href="rendering.html#form-controls"><span class="secno">10.3.11</span> <span class="content">Form controls</span></a>
        </li><li><a href="rendering.html#the-hr-element-rendering"><span class="secno">10.3.12</span> <span class="content">The <code><span>hr</span></code> element</span></a>
        </li><li><a href="rendering.html#the-fieldset-and-legend-elements"><span class="secno">10.3.13</span> <span class="content">The <code>fieldset</code> and <code><span>legend</span></code> elements</span></a>
       </li></ol>
      </li><li>
       <a href="rendering.html#replaced-elements"><span class="secno">10.4</span> <span class="content">Replaced elements</span></a>
       <ol class="toc">
        <li><a href="rendering.html#replaced-elements-embedded-content"><span class="secno">10.4.1</span> <span class="content">Embedded content</span></a>
        </li><li><a href="rendering.html#replaced-elements-images"><span class="secno">10.4.2</span> <span class="content">Images</span></a>
        </li><li><a href="rendering.html#attributes-for-embedded-content-and-images"><span class="secno">10.4.3</span> <span class="content">Attributes for embedded content and images</span></a>
        </li><li><a href="rendering.html#replaced-elements-image-maps"><span class="secno">10.4.4</span> <span class="content">Image maps</span></a>
       </li></ol>
      </li><li>
       <a href="rendering.html#bindings"><span class="secno">10.5</span> <span class="content">Bindings</span></a>
       <ol class="toc">
        <li><a href="rendering.html#bindings-introduction"><span class="secno">10.5.1</span> <span class="content">Introduction</span></a>
        </li><li><a href="rendering.html#the-button-element-rendering"><span class="secno">10.5.2</span> <span class="content">The <code><span>button</span></code> element</span></a>
        </li><li><a href="rendering.html#the-details-element-rendering"><span class="secno">10.5.3</span> <span class="content">The <code><span>details</span></code> element</span></a>
        </li><li><a href="rendering.html#the-input-element-as-a-text-entry-widget"><span class="secno">10.5.4</span> <span class="content">The <code><span>input</span></code> element as a text entry widget</span></a>
        </li><li><a href="rendering.html#the-input-element-as-domain-specific-widgets"><span class="secno">10.5.5</span> <span class="content">The <code><span>input</span></code> element as domain-specific widgets</span></a>
        </li><li><a href="rendering.html#the-input-element-as-a-range-control"><span class="secno">10.5.6</span> <span class="content">The <code><span>input</span></code> element as a range control</span></a>
        </li><li><a href="rendering.html#the-input-element-as-a-color-well"><span class="secno">10.5.7</span> <span class="content">The <code><span>input</span></code> element as a color well</span></a>
        </li><li><a href="rendering.html#the-input-element-as-a-checkbox-and-radio-button-widgets"><span class="secno">10.5.8</span> <span class="content">The <code><span>input</span></code> element as a checkbox and radio button widgets</span></a>
        </li><li><a href="rendering.html#the-input-element-as-a-file-upload-control"><span class="secno">10.5.9</span> <span class="content">The <code><span>input</span></code> element as a file upload control</span></a>
        </li><li><a href="rendering.html#the-input-element-as-a-button"><span class="secno">10.5.10</span> <span class="content">The <code><span>input</span></code> element as a button</span></a>
        </li><li><a href="rendering.html#the-marquee-element-rendering"><span class="secno">10.5.11</span> <span class="content">The <code><span>marquee</span></code> element</span></a>
        </li><li><a href="rendering.html#the-meter-element-rendering"><span class="secno">10.5.12</span> <span class="content">The <code><span>meter</span></code> element</span></a>
        </li><li><a href="rendering.html#the-progress-element-rendering"><span class="secno">10.5.13</span> <span class="content">The <code><span>progress</span></code> element</span></a>
        </li><li><a href="rendering.html#the-select-element-rendering"><span class="secno">10.5.14</span> <span class="content">The <code><span>select</span></code> element</span></a>
        </li><li><a href="rendering.html#the-textarea-element-rendering"><span class="secno">10.5.15</span> <span class="content">The <code><span>textarea</span></code> element</span></a>
        </li><li><a href="rendering.html#the-keygen-element-rendering"><span class="secno">10.5.16</span> <span class="content">The <code><span>keygen</span></code> element</span></a>
       </li></ol>
      </li><li><a href="rendering.html#frames-and-framesets"><span class="secno">10.6</span> <span class="content">Frames and framesets</span></a>
      </li><li>
       <a href="rendering.html#interactive-media"><span class="secno">10.7</span> <span class="content">Interactive media</span></a>
       <ol class="toc">
        <li><a href="rendering.html#links-forms-and-navigation"><span class="secno">10.7.1</span> <span class="content">Links, forms, and navigation</span></a>
        </li><li><a href="rendering.html#interactive-media-the-title-attribute"><span class="secno">10.7.2</span> <span class="content">The <code>title</code> attribute</span></a>
        </li><li><a href="rendering.html#editing-hosts"><span class="secno">10.7.3</span> <span class="content">Editing hosts</span></a>
        </li><li><a href="rendering.html#text-rendered-in-native-user-interfaces"><span class="secno">10.7.4</span> <span class="content">Text rendered in native user interfaces</span></a>
       </li></ol>
      </li><li><a href="rendering.html#print-media"><span class="secno">10.8</span> <span class="content">Print media</span></a>
      </li><li><a href="rendering.html#unstyled-xml-documents"><span class="secno">10.9</span> <span class="content">Unstyled XML documents</span></a>
     </li></ol>
    </li></ol>
  </nav><main><section>
    <h2 class="heading settled" data-level="10" id="rendering"><span class="secno">10. </span><span class="content">Rendering</span><a class="self-link" href="rendering.html#rendering"></a></h2>
    <p><i>User agents are not required to present HTML documents in any particular way. However, this
  section provides a set of suggestions for rendering HTML documents that, if followed, are likely
  to lead to a user experience that closely resembles the experience intended by the documents'
  authors. So as to avoid confusion regarding the normativity of this section, RFC2119 terms have
  not been used. Instead, the term "expected" is used to indicate behavior that will lead to this
  experience. For the purposes of conformance for user agents designated as <a data-link-type="dfn" href="infrastructure.html#rendering-support-the-suggested-default-rendering" id="ref-for-rendering-support-the-suggested-default-rendering-5">supporting the suggested default rendering</a>, the term "expected" in this
  section has the same conformance implications as the RFC2119-defined term "must".</i></p>
    <h3 class="heading settled" data-level="10.1" id="rendering-introduction"><span class="secno">10.1. </span><span class="content">Introduction</span><a class="self-link" href="rendering.html#rendering-introduction"></a></h3>
    <p>In general, user agents are expected to support CSS, and many of the suggestions in this
  section are expressed in CSS terms. User agents that use other presentation mechanisms can derive
  their expected behavior by translating from the CSS rules given in this section.</p>
    <p>In the absence of style-layer rules to the contrary (e.g., author style sheets), user agents are
  expected to render an element so that it conveys to the user the meaning that the element <a data-link-type="dfn" href="dom.html#represent" id="ref-for-represent-182">represents</a>, as described by this specification.</p>
    <p>The suggestions in this section generally assume a visual output medium with a resolution of
  96dpi or greater, but HTML is intended to apply to multiple media (it is a <i>media-independent</i> language). User agent implementors are encouraged to adapt the
  suggestions in this section to their target media.</p>
    <hr>
    <p>An element is <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport="" id="being-rendered">being rendered</dfn> if it has any associated CSS layout boxes, SVG layout
  boxes, or some equivalent in other styling languages.</p>
    <p class="note" role="note"> Just being off-screen does not mean the element is not <a data-link-type="dfn" href="rendering.html#being-rendered" id="ref-for-being-rendered-25">being
  rendered</a>. The presence of the <code>hidden</code> attribute normally
  means the element is not <a data-link-type="dfn" href="rendering.html#being-rendered" id="ref-for-being-rendered-26">being rendered</a>, though this might be overridden by the style
  sheets. </p>
    <hr>
    <p>User agents that do not honor author-level CSS style sheets are nonetheless expected to act as
  if they applied the CSS rules given in these sections in a manner consistent with this
  specification and the relevant CSS and Unicode specifications. <a data-link-type="biblio" href="references.html#biblio-css-2015">[CSS-2015]</a> <a data-link-type="biblio" href="references.html#biblio-unicode">[UNICODE]</a> <a data-link-type="biblio" href="references.html#biblio-bidi">[BIDI]</a></p>
    <p class="note" role="note"> This is especially important for issues relating to the <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/CSS21/visuren.html#propdef-display">display</a>, <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/css-writing-modes-3/#propdef-unicode-bidi">unicode-bidi</a>,
  and <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/css-writing-modes-3/#propdef-direction">direction</a> properties. </p>
    <h3 class="heading settled" data-level="10.2" id="the-css-user-agent-style-sheet-and-presentational-hints"><span class="secno">10.2. </span><span class="content">The CSS user agent style sheet and presentational hints</span><a class="self-link" href="rendering.html#the-css-user-agent-style-sheet-and-presentational-hints"></a></h3>
    <p>The CSS rules given in these subsections are, except where otherwise specified, expected to be
  used as part of the user-agent level style sheet defaults for all documents that contain <a data-link-type="dfn" href="infrastructure.html#html-element" id="ref-for-html-element-93">html elements</a>.</p>
    <p>Some rules are intended for the author-level zero-specificity presentational hints part of the
  CSS cascade; these are explicitly called out as <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport="" id="presentational-hints">presentational hints</dfn>.</p>
    <p>Some of the rules regarding left and right margins are given here as appropriate for elements
  whose <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/css-writing-modes-3/#propdef-direction">direction</a> property is <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css-writing-modes-3/#valdef-direction-ltr">ltr</a>, and are expected to be flipped around on elements whose <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/css-writing-modes-3/#propdef-direction">direction</a> property is <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css-writing-modes-3/#valdef-direction-rtl">rtl</a>. These are marked "<dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport="" id="ltr-specific">LTR-specific</dfn>".</p>
    <p class="note" role="note"> These markings only affect the handling of attribute <em>values</em>, not
  attribute names or element names. </p>
    <hr>
    <p>When the text below says that an attribute <var>attribute</var> on an element <var>element</var> <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport="" id="maps-to-the-pixel-length-property">maps to the pixel length property</dfn> (or properties) <var>properties</var>, it means that if <var>element</var> has an attribute <var>attribute</var> set, and parsing that attribute’s value using the <a data-link-type="dfn" href="infrastructure.html#parse-that-attributes-value" id="ref-for-parse-that-attributes-value-20">rules for parsing non-negative
  integers</a> doesn’t generate an error, then the user agent is expected to use the parsed value
  as a pixel length for a <a data-link-type="dfn" href="rendering.html#presentational-hints" id="ref-for-presentational-hints-1">presentational hint</a> for <var>properties</var>.</p>
    <p>When the text below says that an attribute <var>attribute</var> on an element <var>element</var> <dfn class="dfn-paneled" data-dfn-type="dfn" data-lt="as hints for the rendering|maps to the dimension properties|maps to the dimension property" data-noexport="" id="as-hints-for-the-rendering">maps to the dimension property</dfn> (or properties) <var>properties</var>, it means that if <var>element</var> has an attribute <var>attribute</var> set, and parsing that attribute’s value using the <a data-link-type="dfn" href="infrastructure.html#rules-for-parsing-dimension-values" id="ref-for-rules-for-parsing-dimension-values-3">rules for parsing dimension values</a> doesn’t generate an error, then the user agent is expected to use the parsed dimension as the
  value for a <a data-link-type="dfn" href="rendering.html#presentational-hints" id="ref-for-presentational-hints-2">presentational hint</a> for <var>properties</var>, with the value given as a pixel length if the dimension was a length, and
  with the value given as a percentage if the dimension was a percentage.</p>
    <p>When the text below says that an attribute <var>attribute</var> on an element <var>element</var> <dfn class="dfn-paneled" data-dfn-type="dfn" data-lt="map to the dimension property (ignoring zero)|maps to the dimension property (ignoring zero)" data-noexport="" id="map-to-the-dimension-property-ignoring-zero">maps to the dimension property (ignoring zero)</dfn> (or properties) <var>properties</var>, it means that if <var>element</var> has an attribute <var>attribute</var> set, and parsing that attribute’s value using the <a data-link-type="dfn" href="infrastructure.html#rules-for-parsing-non-zero-dimension-values" id="ref-for-rules-for-parsing-non-zero-dimension-values-1">rules for parsing non-zero dimension
  values</a> doesn’t generate an error, then the user agent is expected to use the parsed
  dimension as the value for a <a data-link-type="dfn" href="rendering.html#presentational-hints" id="ref-for-presentational-hints-3">presentational hint</a> for <var>properties</var>, with the value given as a pixel length if the dimension was a length, and
  with the value given as a percentage if the dimension was a percentage.</p>
    <p>When a user agent is to <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport="" id="align-descendants">align descendants</dfn> of a node, the user agent is expected to
  align only those descendants that have both their <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/CSS21/box.html#propdef-margin-left">margin-left</a> and <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/CSS21/box.html#propdef-margin-right">margin-right</a> properties
  computing to a value other than <a class="css" data-link-type="value" href="https://www.w3.org/TR/CSS21/box.html#value-def-margin-width"><code>auto</code></a>, that are over-constrained and that have one of those two
  margins with a used value forced to a greater value, and that do not themselves have an applicable <code>align</code> attribute. When multiple elements are to <a data-link-type="dfn" href="rendering.html#align-descendants" id="ref-for-align-descendants-1">align</a> a particular descendant, the most deeply nested such
  element is expected to override the others. Aligned elements are expected to be aligned by having
  the used values of their left and right margins be set accordingly.</p>
    <h3 class="heading settled" data-level="10.3" id="non-replaced-elements"><span class="secno">10.3. </span><span class="content">Non-replaced elements</span><a class="self-link" href="rendering.html#non-replaced-elements"></a></h3>
    <h4 class="heading settled" data-level="10.3.1" id="hidden-elements"><span class="secno">10.3.1. </span><span class="content">Hidden elements</span><a class="self-link" href="rendering.html#hidden-elements"></a></h4>
<pre class="highlight"><span class="n">@namespace</span> <span class="nf">url</span><span class="p">(</span><span class="s">http://www.w3.org/1999/xhtml</span><span class="p">);</span>

<span class="nt">[hidden], area, base, basefont, datalist, head, link, menu[type=context i], meta,</span>
<span class="nt">noembed, noframes, param, rp, script, source, style, template, track, title </span><span class="p">{</span>
  <span class="k">display</span><span class="p">:</span> none<span class="p">;</span>
<span class="p">}</span>

<span class="nt">embed[hidden] </span><span class="p">{</span> <span class="k">display</span><span class="p">:</span> inline<span class="p">;</span> <span class="k">height</span><span class="p">:</span> <span class="m">0</span><span class="p">;</span> <span class="k">width</span><span class="p">:</span> <span class="m">0</span><span class="p">;</span> <span class="p">}</span>

<span class="nt">input[type=hidden i] </span><span class="p">{</span> display none ! important; }

@media (scripting) {
  noscript { display: none !important; }
}
</pre>
    <h4 class="heading settled" data-level="10.3.2" id="the-page"><span class="secno">10.3.2. </span><span class="content">The page</span><a class="self-link" href="rendering.html#the-page"></a></h4>
<pre class="highlight"><span class="n">@namespace</span> <span class="nf">url</span><span class="p">(</span><span class="s">http://www.w3.org/1999/xhtml</span><span class="p">);</span>

<span class="nt">html, body </span><span class="p">{</span> <span class="k">display</span><span class="p">:</span> block<span class="p">;</span> <span class="p">}</span>
</pre>
    <p>For each property in the table below, given a <code><a data-link-type="element" href="sections.html#elementdef-body" id="ref-for-elementdef-body-108">body</a></code> element, the first attribute
  that exists <a data-link-type="dfn" href="rendering.html#maps-to-the-pixel-length-property" id="ref-for-maps-to-the-pixel-length-property-1">maps to the pixel length property</a> on the <code><a data-link-type="element" href="sections.html#elementdef-body" id="ref-for-elementdef-body-109">body</a></code> element. If
  none of the attributes for a property are found, or if the value of the attribute that was found
  cannot be parsed successfully, then, then a default value of 8px is expected to be used for that
  property instead.</p>
    <table>
     <thead>
      <tr>
       <th>Property 
       </th><th>Source 
     </th></tr></thead><tbody>
      <tr>
       <td rowspan="3"><a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/CSS21/box.html#propdef-margin-top">margin-top</a> 
       </td><td><code><a data-link-type="element" href="sections.html#elementdef-body" id="ref-for-elementdef-body-110">body</a></code> element’s <code>marginheight</code> attribute 
      </td></tr><tr>
       <td>The <code><a data-link-type="element" href="sections.html#elementdef-body" id="ref-for-elementdef-body-111">body</a></code> element’s <a data-link-type="dfn" href="rendering.html#container-frame-element" id="ref-for-container-frame-element-1">container frame element</a>’s <code>marginheight</code> attribute 
      </td></tr><tr>
       <td><code><a data-link-type="element" href="sections.html#elementdef-body" id="ref-for-elementdef-body-112">body</a></code> element’s <code>topmargin</code> attribute 
     </td></tr></tbody><tbody>
      <tr>
       <td rowspan="3"><a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/CSS21/box.html#propdef-margin-right">margin-right</a> 
       </td><td><code><a data-link-type="element" href="sections.html#elementdef-body" id="ref-for-elementdef-body-113">body</a></code> element’s <code>marginwidth</code> attribute 
      </td></tr><tr>
       <td>The <code><a data-link-type="element" href="sections.html#elementdef-body" id="ref-for-elementdef-body-114">body</a></code> element’s <a data-link-type="dfn" href="rendering.html#container-frame-element" id="ref-for-container-frame-element-2">container frame element</a>’s <code>marginwidth</code> attribute 
      </td></tr><tr>
       <td><code><a data-link-type="element" href="sections.html#elementdef-body" id="ref-for-elementdef-body-115">body</a></code> element’s <code>rightmargin</code> attribute 
     </td></tr></tbody><tbody>
      <tr>
       <td rowspan="3"><a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/CSS21/box.html#propdef-margin-bottom">margin-bottom</a> 
       </td><td><code><a data-link-type="element" href="sections.html#elementdef-body" id="ref-for-elementdef-body-116">body</a></code> element’s <code>marginheight</code> attribute 
      </td></tr><tr>
       <td>The <code><a data-link-type="element" href="sections.html#elementdef-body" id="ref-for-elementdef-body-117">body</a></code> element’s <a data-link-type="dfn" href="rendering.html#container-frame-element" id="ref-for-container-frame-element-3">container frame element</a>’s <code>marginheight</code> attribute 
      </td></tr><tr>
       <td><code><a data-link-type="element" href="sections.html#elementdef-body" id="ref-for-elementdef-body-118">body</a></code> element’s <code>bottommargin</code> attribute 
     </td></tr></tbody><tbody>
      <tr>
       <td rowspan="3"><a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/CSS21/box.html#propdef-margin-left">margin-left</a> 
       </td><td><code><a data-link-type="element" href="sections.html#elementdef-body" id="ref-for-elementdef-body-119">body</a></code> element’s <code>marginwidth</code> attribute 
      </td></tr><tr>
       <td>The <code><a data-link-type="element" href="sections.html#elementdef-body" id="ref-for-elementdef-body-120">body</a></code> element’s <a data-link-type="dfn" href="rendering.html#container-frame-element" id="ref-for-container-frame-element-4">container frame element</a>’s <code>marginwidth</code> attribute 
      </td></tr><tr>
       <td><code><a data-link-type="element" href="sections.html#elementdef-body" id="ref-for-elementdef-body-121">body</a></code> element’s <code>leftmargin</code> attribute 
    </td></tr></tbody></table>
    <p>If the <code><a data-link-type="element" href="sections.html#elementdef-body" id="ref-for-elementdef-body-122">body</a></code> element’s <a data-link-type="dfn" href="https://www.w3.org/TR/dom/#concept-node-document">node document</a>’s <a data-link-type="dfn" href="browsers.html#browsing-context" id="ref-for-browsing-context-329">browsing context</a> is a <a data-link-type="dfn" href="browsers.html#nested-browsing-contexts" id="ref-for-nested-browsing-contexts-80">nested browsing context</a>, and the <a data-link-type="dfn" href="browsers.html#browsing-context-container" id="ref-for-browsing-context-container-35">browsing context container</a> of that <a data-link-type="dfn" href="browsers.html#nested-browsing-contexts" id="ref-for-nested-browsing-contexts-81">nested browsing context</a> is a <code>frame</code> or <code><a data-link-type="element" href="semantics-embedded-content.html#elementdef-iframe" id="ref-for-elementdef-iframe-69">iframe</a></code> element, then
  the <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport="" id="container-frame-element">container frame element</dfn> of the <code><a data-link-type="element" href="sections.html#elementdef-body" id="ref-for-elementdef-body-123">body</a></code> element is that <code>frame</code> or <code><a data-link-type="element" href="semantics-embedded-content.html#elementdef-iframe" id="ref-for-elementdef-iframe-70">iframe</a></code> element. Otherwise, there is no <a data-link-type="dfn" href="rendering.html#container-frame-element" id="ref-for-container-frame-element-5">container frame element</a>.</p>
    <p class="warning">The above requirements imply that a page can change the margins of another page
  (including one from another <a data-link-type="dfn" href="browsers.html#concept-cross-origin" id="ref-for-concept-cross-origin-98">origin</a>) using, for example, an <code><a data-link-type="element" href="semantics-embedded-content.html#elementdef-iframe" id="ref-for-elementdef-iframe-71">iframe</a></code>. This
  is potentially a security risk, as it might in some cases allow an attack to contrive a situation
  in which a page is rendered not as the author intended, possibly for the purposes of phishing or
  otherwise misleading the user.</p>
    <hr>
    <p>If a <code class="idl"><a data-link-type="idl" href="https://www.w3.org/TR/dom/#document">Document</a></code> is in a <a data-link-type="dfn" href="browsers.html#nested-browsing-contexts" id="ref-for-nested-browsing-contexts-82">nested browsing context</a>, it is expected to be
  positioned and sized to fit inside the content box of its <a data-link-type="dfn" href="browsers.html#browsing-context-container" id="ref-for-browsing-context-container-36">browsing context container</a>.
  If a <a data-link-type="dfn" href="browsers.html#browsing-context" id="ref-for-browsing-context-330">browsing context</a> is not <a data-link-type="dfn" href="rendering.html#being-rendered" id="ref-for-being-rendered-27">being rendered</a>, it is expected to have a <a data-link-type="dfn" href="infrastructure.html#viewport" id="ref-for-viewport-39">viewport</a> with zero width and zero height.</p>
    <p>If the <code class="idl"><a data-link-type="idl" href="https://www.w3.org/TR/dom/#document">Document</a></code> is in a <a data-link-type="dfn" href="browsers.html#nested-browsing-contexts" id="ref-for-nested-browsing-contexts-83">nested browsing context</a>, and the <a data-link-type="dfn" href="browsers.html#browsing-context-container" id="ref-for-browsing-context-container-37">browsing context container</a> of that <a data-link-type="dfn" href="browsers.html#nested-browsing-contexts" id="ref-for-nested-browsing-contexts-84">nested browsing context</a> is a <code><a data-link-type="element" href="obsolete.html#elementdef-frame" id="ref-for-elementdef-frame-5">frame</a></code> or <code><a data-link-type="element" href="semantics-embedded-content.html#elementdef-iframe" id="ref-for-elementdef-iframe-72">iframe</a></code> element, and that element has a <code>scrolling</code> attribute, and that attribute’s value is an <a data-link-type="dfn" href="infrastructure.html#ascii-case-insensitive" id="ref-for-ascii-case-insensitive-79">ASCII
  case-insensitive</a> match for the string "<code>off</code>", "<code>noscroll</code>", or "<code>no</code>", then the user agent is expected to
  prevent any scroll bars from being shown for the <a data-link-type="dfn" href="infrastructure.html#viewport" id="ref-for-viewport-40">viewport</a> of the <a data-link-type="dfn" href="browsers.html#nested-browsing-contexts" id="ref-for-nested-browsing-contexts-85">nested browsing context</a>, regardless of the <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/css-overflow-3/#propdef-overflow">overflow</a> property that applies to that <a data-link-type="dfn" href="infrastructure.html#viewport" id="ref-for-viewport-41">viewport</a>.</p>
    <hr>
    <p>When a <code><a data-link-type="element" href="sections.html#elementdef-body" id="ref-for-elementdef-body-124">body</a></code> element has a <code><a data-link-type="element-sub" href="obsolete.html#element-attrdef-body-background" id="ref-for-element-attrdef-body-background-1">background</a></code> attribute set to a non-empty value, the new value is expected to be <a data-link-type="dfn" href="infrastructure.html#reparsed" id="ref-for-reparsed-49">parsed</a> relative to the
  element’s <a data-link-type="dfn" href="https://www.w3.org/TR/dom/#concept-node-document">node document</a>, and if this is successful, the user agent is
  expected to treat the attribute as a <a data-link-type="dfn" href="rendering.html#presentational-hints" id="ref-for-presentational-hints-4">presentational hint</a> setting the element’s <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/css3-background/#background-image">background-image</a> property to the <a data-link-type="dfn" href="infrastructure.html#resulting-url-string" id="ref-for-resulting-url-string-22">resulting URL string</a>.</p>
    <p>When a <code><a data-link-type="element" href="sections.html#elementdef-body" id="ref-for-elementdef-body-125">body</a></code> element has a <code><a data-link-type="element-sub" href="obsolete.html#element-attrdef-body-bgcolor" id="ref-for-element-attrdef-body-bgcolor-1">bgcolor</a></code> attribute
  set, the new value is expected to be parsed using the <a data-link-type="dfn" href="infrastructure.html#rules-for-parsing-a-legacy-color-value" id="ref-for-rules-for-parsing-a-legacy-color-value-1">rules for parsing a legacy color
  value</a>, and if that does not return an error, the user agent is expected to treat the
  attribute as a <a data-link-type="dfn" href="rendering.html#presentational-hints" id="ref-for-presentational-hints-5">presentational hint</a> setting the element’s <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/css3-background/#background-color">background-color</a> property to the resulting color.</p>
    <p>When a <code><a data-link-type="element" href="sections.html#elementdef-body" id="ref-for-elementdef-body-126">body</a></code> element has a <code><a data-link-type="element-sub" href="obsolete.html#element-attrdef-body-text" id="ref-for-element-attrdef-body-text-1">text</a></code> attribute, its
  value is expected to be parsed using the <a data-link-type="dfn" href="infrastructure.html#rules-for-parsing-a-legacy-color-value" id="ref-for-rules-for-parsing-a-legacy-color-value-2">rules for parsing a legacy color value</a>, and
  if that does not return an error, the user agent is expected to treat the attribute as a <a data-link-type="dfn" href="rendering.html#presentational-hints" id="ref-for-presentational-hints-6">presentational hint</a> setting the element’s <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/CSS21/colors.html#propdef-color">color</a> property to
  the resulting color.</p>
    <p>When a <code><a data-link-type="element" href="sections.html#elementdef-body" id="ref-for-elementdef-body-127">body</a></code> element has a <code><a data-link-type="element-sub" href="obsolete.html#element-attrdef-body-link" id="ref-for-element-attrdef-body-link-1">link</a></code> attribute, its
  value is expected to be parsed using the <a data-link-type="dfn" href="infrastructure.html#rules-for-parsing-a-legacy-color-value" id="ref-for-rules-for-parsing-a-legacy-color-value-3">rules for parsing a legacy color value</a>, and
  if that does not return an error, the user agent is expected to treat the attribute as a <a data-link-type="dfn" href="rendering.html#presentational-hints" id="ref-for-presentational-hints-7">presentational hint</a> setting the <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/CSS21/colors.html#propdef-color">color</a> property of any
  element in the <code>Document</code> matching the ':link' pseudo-class to the resulting color.</p>
    <p>When a <code><a data-link-type="element" href="sections.html#elementdef-body" id="ref-for-elementdef-body-128">body</a></code> element has a <code><a data-link-type="element-sub" href="obsolete.html#element-attrdef-body-vlink" id="ref-for-element-attrdef-body-vlink-1">vlink</a></code> attribute,
  its value is expected to be parsed using the <a data-link-type="dfn" href="infrastructure.html#rules-for-parsing-a-legacy-color-value" id="ref-for-rules-for-parsing-a-legacy-color-value-4">rules for parsing a legacy color value</a>,
  and if that does not return an error, the user agent is expected to treat the attribute as a <a data-link-type="dfn" href="rendering.html#presentational-hints" id="ref-for-presentational-hints-8">presentational hint</a> setting the <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/CSS21/colors.html#propdef-color">color</a> property of any
  element in the <code>Document</code> matching the ':visited' pseudo-class to the resulting
  color.</p>
    <p>When a <code><a data-link-type="element" href="sections.html#elementdef-body" id="ref-for-elementdef-body-129">body</a></code> element has an <code><a data-link-type="element-sub" href="obsolete.html#element-attrdef-body-alink" id="ref-for-element-attrdef-body-alink-1">alink</a></code> attribute,
  its value is expected to be parsed using the <a data-link-type="dfn" href="infrastructure.html#rules-for-parsing-a-legacy-color-value" id="ref-for-rules-for-parsing-a-legacy-color-value-5">rules for parsing a legacy color value</a>,
  and if that does not return an error, the user agent is expected to treat the attribute as a <a data-link-type="dfn" href="rendering.html#presentational-hints" id="ref-for-presentational-hints-9">presentational hint</a> setting the <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/CSS21/colors.html#propdef-color">color</a> property of any
  element in the <code>Document</code> matching the ':active' pseudo-class and either the ':link'
  pseudo-class or the ':visited' pseudo-class to the resulting color.</p>
    <h4 class="heading settled" data-level="10.3.3" id="non-replaced-elements-flow-content"><span class="secno">10.3.3. </span><span class="content">Flow content</span><a class="self-link" href="rendering.html#non-replaced-elements-flow-content"></a></h4>
<pre class="highlight"><span class="n">@namespace</span> <span class="nf">url</span><span class="p">(</span><span class="s">http://www.w3.org/1999/xhtml</span><span class="p">);</span>

<span class="nt">address, blockquote, center, div, figure, figcaption, footer, form, header, hr,</span>
<span class="nt">legend, listing, main, p, plaintext, pre, summary, xmp </span><span class="p">{</span>
  <span class="k">display</span><span class="p">:</span> block<span class="p">;</span>
<span class="p">}</span>

<span class="nt">blockquote, figure, listing, p, plaintext, pre, xmp </span><span class="p">{</span>
  <span class="k">margin-top</span><span class="p">:</span> <span class="m">1</span><span class="l">em</span><span class="p">;</span> <span class="k">margin-bottom</span><span class="p">:</span> <span class="m">1</span><span class="l">em</span><span class="p">;</span>
<span class="p">}</span>

<span class="nt">blockquote, figure </span><span class="p">{</span> <span class="k">margin-left</span><span class="p">:</span> <span class="m">40</span><span class="l">px</span><span class="p">;</span> <span class="k">margin-right</span><span class="p">:</span> <span class="m">40</span><span class="l">px</span><span class="p">;</span> <span class="p">}</span>

<span class="nt">address </span><span class="p">{</span> <span class="k">font-style</span><span class="p">:</span> italic<span class="p">;</span> <span class="p">}</span>
<span class="nt">listing, plaintext, pre, xmp </span><span class="p">{</span>
  <span class="k">font-family</span><span class="p">:</span> monospace<span class="p">;</span> <span class="k">white-space</span><span class="p">:</span> pre<span class="p">;</span>
<span class="p">}</span>

<span class="nt">dialog:not([open]) </span><span class="p">{</span> <span class="k">display</span><span class="p">:</span> none<span class="p">;</span> <span class="p">}</span>
<span class="nt">dialog </span><span class="p">{</span>
  <span class="k">position</span><span class="p">:</span> absolute<span class="p">;</span>
  <span class="k">left</span><span class="p">:</span> <span class="m">0</span><span class="p">;</span> <span class="k">right</span><span class="p">:</span> <span class="m">0</span><span class="p">;</span>
  <span class="k">width</span><span class="p">:</span> fit-content<span class="p">;</span>
  <span class="k">height</span><span class="p">:</span> fit-content<span class="p">;</span>
  <span class="k">margin</span><span class="p">:</span> auto<span class="p">;</span>
  <span class="k">border</span><span class="p">:</span> solid<span class="p">;</span>
  <span class="k">padding</span><span class="p">:</span> <span class="m">1</span><span class="l">em</span><span class="p">;</span>
  <span class="k">background</span><span class="p">:</span> white<span class="p">;</span>
  <span class="k">color</span><span class="p">:</span> black<span class="p">;</span>
<span class="p">}</span>
<span class="nt">dialog::backdrop </span><span class="p">{</span>
  <span class="k">position</span><span class="p">:</span> fixed<span class="p">;</span>
  <span class="k">top</span><span class="p">:</span> <span class="m">0</span><span class="p">;</span> <span class="k">right</span><span class="p">:</span> <span class="m">0</span><span class="p">;</span> <span class="k">bottom</span><span class="p">:</span> <span class="m">0</span><span class="p">;</span> <span class="k">left</span><span class="p">:</span> <span class="m">0</span><span class="p">;</span>
  <span class="k">background</span><span class="p">:</span> <span class="nf">rgba</span><span class="p">(</span><span class="m">0</span><span class="p">,</span><span class="m">0</span><span class="p">,</span><span class="m">0</span><span class="p">,</span><span class="m">0</span>.1);
}

/* for small devices, modal dialogs go fullscreen */
@media screen and (max-width: 540px) {
  dialog:modal {
    top: 0;
    width: auto;
    margin: 1em;
  }
}
</pre>
    <p>The following rules are also expected to apply, as <a data-link-type="dfn" href="rendering.html#presentational-hints" id="ref-for-presentational-hints-10">presentational hints</a>:</p>
<pre class="highlight"><span class="n">@namespace</span> <span class="nf">url</span><span class="p">(</span><span class="s">http://www.w3.org/1999/xhtml</span><span class="p">);</span>

<span class="nt">pre[wrap] </span><span class="p">{</span> <span class="k">white-space</span><span class="p">:</span> pre-wrap<span class="p">;</span> <span class="p">}</span>
</pre>
    <p>In <a data-link-type="dfn" href="infrastructure.html#quirks-mode" id="ref-for-quirks-mode-10">quirks mode</a>, the following rules are also expected to apply:</p>
<pre class="highlight"><span class="n">@namespace</span> <span class="nf">url</span><span class="p">(</span><span class="s">http://www.w3.org/1999/xhtml</span><span class="p">);</span>

<span class="nt">form </span><span class="p">{</span> <span class="k">margin-bottom</span><span class="p">:</span> <span class="m">1</span><span class="l">em</span><span class="p">;</span> <span class="p">}</span>
</pre>
    <hr>
    <p>The <code><a data-link-type="element" href="obsolete.html#elementdef-center" id="ref-for-elementdef-center-2">center</a></code> element, and the <code><a data-link-type="element" href="grouping-content.html#elementdef-div" id="ref-for-elementdef-div-28">div</a></code> element when it has an <code><a data-link-type="element-sub" href="obsolete.html#element-attrdef-div-align" id="ref-for-element-attrdef-div-align-1">align</a></code> attribute whose value is an <a data-link-type="dfn" href="infrastructure.html#ascii-case-insensitive" id="ref-for-ascii-case-insensitive-80">ASCII
  case-insensitive</a> match for either the string "<code>center</code>" or the string
  "<code>middle</code>", are expected to center text within themselves, as if they had
  their <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/css-text-3/#text-align">text-align</a> property set to <span class="css">center</span> in a <a data-link-type="dfn" href="rendering.html#presentational-hints" id="ref-for-presentational-hints-11">presentational hint</a>, and to <a data-link-type="dfn" href="rendering.html#align-descendants" id="ref-for-align-descendants-2">align descendants</a> to the center.</p>
    <p>The <code><a data-link-type="element" href="grouping-content.html#elementdef-div" id="ref-for-elementdef-div-29">div</a></code> element, when it has an <code><a data-link-type="element-sub" href="obsolete.html#element-attrdef-div-align" id="ref-for-element-attrdef-div-align-2">align</a></code> attribute whose value is an <a data-link-type="dfn" href="infrastructure.html#ascii-case-insensitive" id="ref-for-ascii-case-insensitive-81">ASCII case-insensitive</a> match for the string "<code>left</code>", is expected to left-align text within itself, as if it had its <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/css-text-3/#text-align">text-align</a> property set to <span class="css">left</span> in a <a data-link-type="dfn" href="rendering.html#presentational-hints" id="ref-for-presentational-hints-12">presentational
  hint</a>, and to <a data-link-type="dfn" href="rendering.html#align-descendants" id="ref-for-align-descendants-3">align descendants</a> to the left.</p>
    <p>The <code><a data-link-type="element" href="grouping-content.html#elementdef-div" id="ref-for-elementdef-div-30">div</a></code> element, when it has an <code><a data-link-type="element-sub" href="obsolete.html#element-attrdef-div-align" id="ref-for-element-attrdef-div-align-3">align</a></code> attribute whose value is an <a data-link-type="dfn" href="infrastructure.html#ascii-case-insensitive" id="ref-for-ascii-case-insensitive-82">ASCII case-insensitive</a> match for the string "<code>right</code>", is expected to right-align text within itself, as if it had its <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/css-text-3/#text-align">text-align</a> property set to <span class="css">right</span> in a <a data-link-type="dfn" href="rendering.html#presentational-hints" id="ref-for-presentational-hints-13">presentational
  hint</a>, and to <a data-link-type="dfn" href="rendering.html#align-descendants" id="ref-for-align-descendants-4">align descendants</a> to the right.</p>
    <p>The <code><a data-link-type="element" href="grouping-content.html#elementdef-div" id="ref-for-elementdef-div-31">div</a></code> element, when it has an <code><a data-link-type="element-sub" href="obsolete.html#element-attrdef-div-align" id="ref-for-element-attrdef-div-align-4">align</a></code> attribute whose value is an <a data-link-type="dfn" href="infrastructure.html#ascii-case-insensitive" id="ref-for-ascii-case-insensitive-83">ASCII case-insensitive</a> match for the string "<code>justify</code>", is expected to full-justify text within itself, as if it had its <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/css-text-3/#text-align">text-align</a> property set to <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-text-3/#valdef-text-align-justify">justify</a> in a <a data-link-type="dfn" href="rendering.html#presentational-hints" id="ref-for-presentational-hints-14">presentational
  hint</a>, and to <a data-link-type="dfn" href="rendering.html#align-descendants" id="ref-for-align-descendants-5">align descendants</a> to the left.</p>
    <h4 class="heading settled" data-level="10.3.4" id="non-replaced-elements-phrasing-content"><span class="secno">10.3.4. </span><span class="content">Phrasing content</span><a class="self-link" href="rendering.html#non-replaced-elements-phrasing-content"></a></h4>
<pre class="highlight"><span class="n">@namespace</span> <span class="nf">url</span><span class="p">(</span><span class="s">http://www.w3.org/1999/xhtml</span><span class="p">);</span>

  <span class="nt">cite, dfn, em, i, var </span><span class="p">{</span> <span class="k">font-style</span><span class="p">:</span> italic<span class="p">;</span> <span class="p">}</span>
  <span class="nt">b, strong </span><span class="p">{</span> <span class="k">font-weight</span><span class="p">:</span> bolder<span class="p">;</span> <span class="p">}</span>
  <span class="nt">code, kbd, samp, tt </span><span class="p">{</span> <span class="k">font-family</span><span class="p">:</span> monospace<span class="p">;</span> <span class="p">}</span>
  <span class="nt">big </span><span class="p">{</span> <span class="k">font-size</span><span class="p">:</span> larger<span class="p">;</span> <span class="p">}</span>
  <span class="nt">small </span><span class="p">{</span> <span class="k">font-size</span><span class="p">:</span> smaller<span class="p">;</span> <span class="p">}</span>

  <span class="nt">sub </span><span class="p">{</span> <span class="k">vertical-align</span><span class="p">:</span> sub<span class="p">;</span> <span class="p">}</span>
  <span class="nt">sup </span><span class="p">{</span> <span class="k">vertical-align</span><span class="p">:</span> super<span class="p">;</span> <span class="p">}</span>
  <span class="nt">sub, sup </span><span class="p">{</span> <span class="k">line-height</span><span class="p">:</span> normal<span class="p">;</span> <span class="k">font-size</span><span class="p">:</span> smaller<span class="p">;</span> <span class="p">}</span>

  <span class="nt">ruby </span><span class="p">{</span> <span class="k">display</span><span class="p">:</span> ruby<span class="p">;</span> <span class="p">}</span>
  <span class="nt">rb   </span><span class="p">{</span> <span class="k">display</span><span class="p">:</span> ruby-base<span class="p">;</span> <span class="k">white-space</span><span class="p">:</span> nowrap<span class="p">;</span> <span class="p">}</span>
  <span class="nt">rt   </span><span class="p">{</span>
    <span class="k">display</span><span class="p">:</span> ruby-text<span class="p">;</span>
    <span class="k">white-space</span><span class="p">:</span> nowrap<span class="p">;</span>
    <span class="k">font-size</span><span class="p">:</span> <span class="m">5</span><span class="l">0</span>%;
    font-variant-east-asian: ruby;
    text-emphasis: none;
  }
  rbc  { display: ruby-base-container; }
  rtc  { display: ruby-text-container; }
  ruby, rb, rt, rbc, rtc { unicode-bidi: isolate; }

  :link { color: #0000EE; }
  :visited { color: #551A8B; }
  :link:active, :visited:active { color: #FF0000; }
  :link, :visited { text-decoration: underline; cursor: pointer; }
  a:link[rel~=help], a:visited[rel~=help],
  area:link[rel~=help], area:visited[rel~=help] { cursor: help; }

  :focus { outline: auto; }

  mark { background: yellow; color: black; } /* this color is just a suggestion and can be changed based on implementation feedback */

  abbr[title], acronym[title] { text-decoration: dotted underline; }
  ins, u { text-decoration: underline; }
  del, s, strike { text-decoration: line-through; }
  blink { text-decoration: blink; }

  q::before { content: open-quote; }
  q::after { content: close-quote; }

  br { display-outside: newline; } /* this also has bidi implications */
  nobr { white-space: nowrap; }
  wbr { display-outside: break-opportunity; } /* this also has bidi implications */
  nobr wbr { white-space: normal; }
</pre>
    <p>The following rules are also expected to apply, as <a data-link-type="dfn" href="rendering.html#presentational-hints" id="ref-for-presentational-hints-15">presentational hints</a>:</p>
<pre class="highlight"><span class="n">@namespace</span> <span class="nf">url</span><span class="p">(</span><span class="s">http://www.w3.org/1999/xhtml</span><span class="p">);</span>

  <span class="nt">br[clear=left i] </span><span class="p">{</span> <span class="k">clear</span><span class="p">:</span> left<span class="p">;</span> <span class="p">}</span>
  <span class="nt">br[clear=right i] </span><span class="p">{</span> <span class="k">clear</span><span class="p">:</span> right<span class="p">;</span> <span class="p">}</span>
  <span class="nt">br[clear=all i], br[clear=both i] </span><span class="p">{</span> <span class="k">clear</span><span class="p">:</span> both<span class="p">;</span> <span class="p">}</span>
</pre>
    <p>User agents that do not support correct ruby rendering are expected to render parentheses
  around the text of <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-rt" id="ref-for-elementdef-rt-27">rt</a></code> elements in the absence of <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-rp" id="ref-for-elementdef-rp-27">rp</a></code> elements. <a data-link-type="biblio" href="references.html#biblio-css3-ruby">[CSS3-RUBY]</a></p>
    <hr>
    <p>User agents are expected to support the <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/CSS21/visuren.html#propdef-clear">clear</a> property on inline elements (in order to render <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-br" id="ref-for-elementdef-br-17">br</a></code> elements with <code>clear</code> attributes) in the manner
  described in the non-normative note to this effect in CSS2.1.</p>
    <p>The initial value for the <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/CSS21/colors.html#propdef-color">color</a> property is expected to be black. The initial value for the <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/css3-background/#background-color">background-color</a> property is expected to be <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-color-4/#valdef-color-transparent">transparent</a>. The canvas' background is expected to
  be white.</p>
    <hr>
    <p>When a <code><a data-link-type="element" href="obsolete.html#elementdef-font" id="ref-for-elementdef-font-2">font</a></code> element has a <code>color</code> attribute, its value is expected to be parsed using the <a data-link-type="dfn" href="infrastructure.html#rules-for-parsing-a-legacy-color-value" id="ref-for-rules-for-parsing-a-legacy-color-value-6">rules for parsing a legacy color
  value</a>, and if that does not return an error, the user agent is expected to treat the
  attribute as a <a data-link-type="dfn" href="rendering.html#presentational-hints" id="ref-for-presentational-hints-16">presentational hint</a> setting the
  element’s <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/CSS21/colors.html#propdef-color">color</a> property to the resulting color.</p>
    <p>The <code><a data-link-type="element" href="obsolete.html#elementdef-font" id="ref-for-elementdef-font-3">font</a></code> element is expected to
  override the color of any text decoration that spans the text of the element to the used value of
  the element’s <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/CSS21/colors.html#propdef-color">color</a> property.</p>
    <p>When a <code><a data-link-type="element" href="obsolete.html#elementdef-font" id="ref-for-elementdef-font-4">font</a></code> element has a <code>face</code> attribute, the user agent is expected to treat the attribute as a <a data-link-type="dfn" href="rendering.html#presentational-hints" id="ref-for-presentational-hints-17">presentational hint</a> setting the element’s <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/css-fonts-3/#propdef-font-family">font-family</a> property to the attribute’s
  value.</p>
    <p>When a <code><a data-link-type="element" href="obsolete.html#elementdef-font" id="ref-for-elementdef-font-5">font</a></code> element has a <code>size</code> attribute, the user agent is expected to use the following steps, known as the <dfn data-dfn-type="dfn" data-lt="rules for parsing a legacy font size" data-noexport="" id="rules-for-parsing-a-legacy-font-size">rules for
  parsing a legacy font size<a class="self-link" href="rendering.html#rules-for-parsing-a-legacy-font-size"></a></dfn>, to treat the attribute as a <a data-link-type="dfn" href="rendering.html#presentational-hints" id="ref-for-presentational-hints-18">presentational hint</a> setting the element’s <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/css-fonts-3/#propdef-font-size">font-size</a> property:</p>
    <ol>
     <li>Let <var>input</var> be the attribute’s value.
     </li><li>Let <var>position</var> be a pointer into <var>input</var>, initially pointing at the
    start of the string.
     </li><li><a data-link-type="dfn" href="infrastructure.html#skip-whitespace" id="ref-for-skip-whitespace-20">Skip whitespace</a>.
     </li><li>If <var>position</var> is past the end of <var>input</var>, there is no <a data-link-type="dfn" href="rendering.html#presentational-hints" id="ref-for-presentational-hints-19">presentational hint</a>. Abort these steps.
     </li><li>If the character at <var>position</var> is a U+002B PLUS SIGN character (+), then let <var>mode</var> be <i>relative-plus</i>, and advance <var>position</var> to the next character.
    Otherwise, if the character at <var>position</var> is a U+002D HYPHEN-MINUS character (-), then
    let <var>mode</var> be <i>relative-minus</i>, and advance <var>position</var> to the next
    character. Otherwise, let <var>mode</var> be <i>absolute</i>.
     </li><li><a data-link-type="dfn" href="infrastructure.html#collect-a-sequence-of-characters" id="ref-for-collect-a-sequence-of-characters-35">Collect a sequence of characters</a> that are <a data-link-type="dfn" href="infrastructure.html#ascii-digits" id="ref-for-ascii-digits-85">ASCII digits</a>, and let
    the resulting sequence be <var>digits</var>.
     </li><li>If <var>digits</var> is the empty string, there is no <a data-link-type="dfn" href="rendering.html#presentational-hints" id="ref-for-presentational-hints-20">presentational hint</a>. Abort these steps.
     </li><li>Interpret <var>digits</var> as a base-ten integer. Let <var>value</var> be the resulting
    number.
     </li><li>
      <p>If <var>mode</var> is <i>relative-plus</i>, then increment <var>value</var> by 3. If <var>mode</var> is <i>relative-minus</i>, then let <var>value</var> be the result of subtracting <var>value</var> from 3.</p>
     </li><li>If <var>value</var> is greater than 7, let it be 7.
     </li><li>If <var>value</var> is less than 1, let it be 1.
     </li><li>
      <p>Set <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/css-fonts-3/#propdef-font-size">font-size</a> to the keyword corresponding to the value of <var>value</var> according to
    the following table:</p>
      <table>
       <thead>
        <tr>
         <th><var>value</var> 
         </th><th><a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/css-fonts-3/#propdef-font-size">font-size</a> keyword 
         </th><th>Notes 
       </th></tr></thead><tbody>
        <tr>
         <td>1 
         </td><td>x-small 
         </td><td>
        </td></tr><tr>
         <td>2 
         </td><td>small 
         </td><td>
        </td></tr><tr>
         <td>3 
         </td><td>medium 
         </td><td>
        </td></tr><tr>
         <td>4 
         </td><td>large 
         </td><td>
        </td></tr><tr>
         <td>5 
         </td><td>x-large 
         </td><td>
        </td></tr><tr>
         <td>6 
         </td><td>xx-large 
         </td><td>
        </td></tr><tr>
         <td>7 
         </td><td>xxx-large 
         </td><td><i>see below</i> 
      </td></tr></tbody></table>
      <p><small>The "xxx-large" value is a non-CSS value used here to
    indicate a font size 50% larger than "xx-large".</small></p>
    </li></ol>
    <h4 class="heading settled" data-level="10.3.5" id="bidirectional-text"><span class="secno">10.3.5. </span><span class="content">Bidirectional text</span><a class="self-link" href="rendering.html#bidirectional-text"></a></h4>
<pre class="highlight"><span class="n">@namespace</span> <span class="nf">url</span><span class="p">(</span><span class="s">http://www.w3.org/1999/xhtml</span><span class="p">);</span>

<span class="nt">[dir]:dir(ltr), bdi:dir(ltr), input[type=tel i]:dir(ltr) </span><span class="p">{</span> <span class="k">direction</span><span class="p">:</span> ltr<span class="p">;</span> <span class="p">}</span>
<span class="nt">[dir]:dir(rtl), bdi:dir(rtl) </span><span class="p">{</span> <span class="k">direction</span><span class="p">:</span> rtl<span class="p">;</span> <span class="p">}</span>

<span class="nt">address, blockquote, center, div, figure, figcaption, footer, form, header, hr,</span>
<span class="nt">legend, listing, main, p, plaintext, pre, summary, xmp, article, aside, h1, h2,</span>
<span class="nt">h3, h4, h5, h6, nav, section, table, caption, colgroup, col, thead,</span>
<span class="nt">tbody, tfoot, tr, td, th, dir, dd, dl, dt, menu, ol, ul, li, bdi, output,</span>
<span class="nt">[dir=ltr i], [dir=rtl i], [dir=auto i] </span><span class="p">{</span>
  <span class="k">unicode-bidi</span><span class="p">:</span> isolate<span class="p">;</span>
<span class="p">}</span>

<span class="nt">bdo, bdo[dir] </span><span class="p">{</span> <span class="k">unicode-bidi</span><span class="p">:</span> isolate-override<span class="p">;</span> <span class="p">}</span>

<span class="nt">input[dir=auto i]:matches([type=search i], [type=tel i], [type=url i],</span>
<span class="nt">[type=email i]), textarea[dir=auto i], pre[dir=auto i] </span><span class="p">{</span>
  <span class="k">unicode-bidi</span><span class="p">:</span> plaintext<span class="p">;</span>
<span class="p">}</span>
<span class="c">/* see prose for input elements whose type attribute is in the Text state */</span>

<span class="c">/* the rules setting the 'content' property on br and wbr elements also has bidi implications */</span>
</pre>
    <p>When an <code><a data-link-type="element" href="sec-forms.html#elementdef-input" id="ref-for-elementdef-input-297">input</a></code> element’s <code>dir</code> attribute is in the <a data-link-type="state" href="dom.html#statedef-dir-auto" id="ref-for-statedef-dir-auto-5">auto</a> state and its <code>type</code> attribute is in the <a data-link-type="dfn" href="dom.html#text" id="ref-for-text-28">Text</a> state, then the user agent is
  expected to act as if it had a user-agent-level style sheet rule setting the <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/css-writing-modes-3/#propdef-unicode-bidi">unicode-bidi</a> property to <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css-writing-modes-3/#valdef-unicode-bidi-plaintext">plaintext</a>.</p>
    <p>Input fields (i.e., <code><a data-link-type="element" href="sec-forms.html#elementdef-textarea" id="ref-for-elementdef-textarea-91">textarea</a></code> elements, and <code><a data-link-type="element" href="sec-forms.html#elementdef-input" id="ref-for-elementdef-input-298">input</a></code> elements when their <code>type</code> attribute is in the <a data-link-type="element-state" href="sec-forms.html#element-statedef-input-text" id="ref-for-element-statedef-input-text-57">Text</a>, <a data-link-type="element-state" href="sec-forms.html#element-statedef-input-search" id="ref-for-element-statedef-input-search-20">Search</a>, <a data-link-type="element-state" href="sec-forms.html#element-statedef-input-telephone" id="ref-for-element-statedef-input-telephone-11">Telephone</a>, <a data-link-type="element-state" href="sec-forms.html#element-statedef-input-url" id="ref-for-element-statedef-input-url-14">URL</a>,
  or <a data-link-type="element-state" href="sec-forms.html#element-statedef-input-e-mail" id="ref-for-element-statedef-input-e-mail-16">E-mail</a> state) are expected to present an editing
  user interface with a directionality that matches the element’s <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/css-writing-modes-3/#propdef-direction">direction</a> property.</p>
    <p>When the document’s character encoding is <a data-link-type="dfn" href="syntax.html#iso-8859-8" id="ref-for-iso-8859-8-1">ISO-8859-8</a>, the following rules are additionally
  expected to apply, following those above: <a data-link-type="biblio" href="references.html#biblio-encoding">[ENCODING]</a></p>
<pre class="highlight"><span class="n">@namespace</span> <span class="nf">url</span><span class="p">(</span><span class="s">http://www.w3.org/1999/xhtml</span><span class="p">);</span>

<span class="nt">address, blockquote, center, div, figure, figcaption, footer, form, header, hr,</span>
<span class="nt">legend, listing, main, p, plaintext, pre, summary, xmp, article, aside, h1, h2,</span>
<span class="nt">h3, h4, h5, h6, nav, section, table, caption, colgroup, col, thead,</span>
<span class="nt">tbody, tfoot, tr, td, th, dir, dd, dl, dt, menu, ol, ul, li, [dir=ltr i],</span>
<span class="nt">[dir=rtl i], [dir=auto i], *|* </span><span class="p">{</span>
  <span class="k">unicode-bidi</span><span class="p">:</span> bidi-override<span class="p">;</span>
<span class="p">}</span>
<span class="nt">input:not([type=submit i]):not([type=reset i]):not([type=button i]),</span>
<span class="nt">textarea, keygen </span><span class="p">{</span>
  <span class="k">unicode-bidi</span><span class="p">:</span> normal<span class="p">;</span>
<span class="p">}</span>
</pre>
    <h4 class="heading settled" data-level="10.3.6" id="quotes"><span class="secno">10.3.6. </span><span class="content">Quotes</span><a class="self-link" href="rendering.html#quotes"></a></h4>
    <p>This block is automatically generated from the Unicode Common Locale Data Repository. <a data-link-type="biblio" href="references.html#biblio-cldr">[CLDR]</a></p>
    <p>User agents are expected to use either the block below (which will be regularly updated) or to
  automatically generate their own copy directly from the source material. The language codes are
  derived from the CLDR file names. The quotes are derived from the <code>delimiter</code> blocks, with fallback handled as specified in the CLDR documentation.</p>
    <p>﻿</p>
<pre class="highlight"><span class="n">@namespace</span> <span class="nf">url</span><span class="p">(</span><span class="s">http://www.w3.org/1999/xhtml</span><span class="p">);</span>

<span class="nt">:root                                                         </span><span class="p">{</span> <span class="k">quotes</span><span class="p">:</span> <span class="s">'\201c'</span> <span class="s">'\201d'</span> <span class="s">'\2018'</span> <span class="s">'\2019'</span> <span class="p">}</span> <span class="c">/* “ ” ‘ ’ */</span>
<span class="nt">:root:lang(af),       :not(:lang(af)) &gt; :lang(af)             </span><span class="p">{</span> <span class="k">quotes</span><span class="p">:</span> <span class="s">'\201c'</span> <span class="s">'\201d'</span> <span class="s">'\2018'</span> <span class="s">'\2019'</span> <span class="p">}</span> <span class="c">/* “ ” ‘ ’ */</span>
<span class="nt">:root:lang(agq),      :not(:lang(agq)) &gt; :lang(agq)           </span><span class="p">{</span> <span class="k">quotes</span><span class="p">:</span> <span class="s">'\201e'</span> <span class="s">'\201d'</span> <span class="s">'\201a'</span> <span class="s">'\2019'</span> <span class="p">}</span> <span class="c">/* „ ” ‚ ’ */</span>
<span class="nt">:root:lang(ak),       :not(:lang(ak)) &gt; :lang(ak)             </span><span class="p">{</span> <span class="k">quotes</span><span class="p">:</span> <span class="s">'\201c'</span> <span class="s">'\201d'</span> <span class="s">'\2018'</span> <span class="s">'\2019'</span> <span class="p">}</span> <span class="c">/* “ ” ‘ ’ */</span>
<span class="nt">:root:lang(am),       :not(:lang(am)) &gt; :lang(am)             </span><span class="p">{</span> <span class="k">quotes</span><span class="p">:</span> <span class="s">'\00ab'</span> <span class="s">'\00bb'</span> <span class="s">'\2039'</span> <span class="s">'\203a'</span> <span class="p">}</span> <span class="c">/* « » ‹ › */</span>
<span class="nt">:root:lang(ar),       :not(:lang(ar)) &gt; :lang(ar)             </span><span class="p">{</span> <span class="k">quotes</span><span class="p">:</span> <span class="s">'\201d'</span> <span class="s">'\201c'</span> <span class="s">'\2019'</span> <span class="s">'\2018'</span> <span class="p">}</span> <span class="c">/* ” “ ’ ‘ */</span>
<span class="nt">:root:lang(asa),      :not(:lang(asa)) &gt; :lang(asa)           </span><span class="p">{</span> <span class="k">quotes</span><span class="p">:</span> <span class="s">'\201c'</span> <span class="s">'\201d'</span> <span class="s">'\2018'</span> <span class="s">'\2019'</span> <span class="p">}</span> <span class="c">/* “ ” ‘ ’ */</span>
<span class="nt">:root:lang(az-Cyrl),  :not(:lang(az-Cyrl)) &gt; :lang(az-Cyrl)   </span><span class="p">{</span> <span class="k">quotes</span><span class="p">:</span> <span class="s">'\00ab'</span> <span class="s">'\00bb'</span> <span class="s">'\2039'</span> <span class="s">'\203a'</span> <span class="p">}</span> <span class="c">/* « » ‹ › */</span>
<span class="nt">:root:lang(bas),      :not(:lang(bas)) &gt; :lang(bas)           </span><span class="p">{</span> <span class="k">quotes</span><span class="p">:</span> <span class="s">'\00ab'</span> <span class="s">'\00bb'</span> <span class="s">'\201e'</span> <span class="s">'\201c'</span> <span class="p">}</span> <span class="c">/* « » „ “ */</span>
<span class="nt">:root:lang(bem),      :not(:lang(bem)) &gt; :lang(bem)           </span><span class="p">{</span> <span class="k">quotes</span><span class="p">:</span> <span class="s">'\201c'</span> <span class="s">'\201d'</span> <span class="s">'\2018'</span> <span class="s">'\2019'</span> <span class="p">}</span> <span class="c">/* “ ” ‘ ’ */</span>
<span class="nt">:root:lang(bez),      :not(:lang(bez)) &gt; :lang(bez)           </span><span class="p">{</span> <span class="k">quotes</span><span class="p">:</span> <span class="s">'\201c'</span> <span class="s">'\201d'</span> <span class="s">'\2018'</span> <span class="s">'\2019'</span> <span class="p">}</span> <span class="c">/* “ ” ‘ ’ */</span>
<span class="nt">:root:lang(bg),       :not(:lang(bg)) &gt; :lang(bg)             </span><span class="p">{</span> <span class="k">quotes</span><span class="p">:</span> <span class="s">'\201e'</span> <span class="s">'\201c'</span> <span class="s">'\201a'</span> <span class="s">'\2018'</span> <span class="p">}</span> <span class="c">/* „ “ ‚ ‘ */</span>
<span class="nt">:root:lang(bm),       :not(:lang(bm)) &gt; :lang(bm)             </span><span class="p">{</span> <span class="k">quotes</span><span class="p">:</span> <span class="s">'\00ab'</span> <span class="s">'\00bb'</span> <span class="s">'\201c'</span> <span class="s">'\201d'</span> <span class="p">}</span> <span class="c">/* « » “ ” */</span>
<span class="nt">:root:lang(bn),       :not(:lang(bn)) &gt; :lang(bn)             </span><span class="p">{</span> <span class="k">quotes</span><span class="p">:</span> <span class="s">'\201c'</span> <span class="s">'\201d'</span> <span class="s">'\2018'</span> <span class="s">'\2019'</span> <span class="p">}</span> <span class="c">/* “ ” ‘ ’ */</span>
<span class="nt">:root:lang(br),       :not(:lang(br)) &gt; :lang(br)             </span><span class="p">{</span> <span class="k">quotes</span><span class="p">:</span> <span class="s">'\00ab'</span> <span class="s">'\00bb'</span> <span class="s">'\2039'</span> <span class="s">'\203a'</span> <span class="p">}</span> <span class="c">/* « » ‹ › */</span>
<span class="nt">:root:lang(brx),      :not(:lang(brx)) &gt; :lang(brx)           </span><span class="p">{</span> <span class="k">quotes</span><span class="p">:</span> <span class="s">'\201c'</span> <span class="s">'\201d'</span> <span class="s">'\2018'</span> <span class="s">'\2019'</span> <span class="p">}</span> <span class="c">/* “ ” ‘ ’ */</span>
<span class="nt">:root:lang(bs-Cyrl),  :not(:lang(bs-Cyrl)) &gt; :lang(bs-Cyrl)   </span><span class="p">{</span> <span class="k">quotes</span><span class="p">:</span> <span class="s">'\201e'</span> <span class="s">'\201c'</span> <span class="s">'\201a'</span> <span class="s">'\2018'</span> <span class="p">}</span> <span class="c">/* „ “ ‚ ‘ */</span>
<span class="nt">:root:lang(ca),       :not(:lang(ca)) &gt; :lang(ca)             </span><span class="p">{</span> <span class="k">quotes</span><span class="p">:</span> <span class="s">'\201c'</span> <span class="s">'\201d'</span> <span class="s">'\00ab'</span> <span class="s">'\00bb'</span> <span class="p">}</span> <span class="c">/* “ ” « » */</span>
<span class="nt">:root:lang(cgg),      :not(:lang(cgg)) &gt; :lang(cgg)           </span><span class="p">{</span> <span class="k">quotes</span><span class="p">:</span> <span class="s">'\201c'</span> <span class="s">'\201d'</span> <span class="s">'\2018'</span> <span class="s">'\2019'</span> <span class="p">}</span> <span class="c">/* “ ” ‘ ’ */</span>
<span class="nt">:root:lang(chr),      :not(:lang(chr)) &gt; :lang(chr)           </span><span class="p">{</span> <span class="k">quotes</span><span class="p">:</span> <span class="s">'\201c'</span> <span class="s">'\201d'</span> <span class="s">'\2018'</span> <span class="s">'\2019'</span> <span class="p">}</span> <span class="c">/* “ ” ‘ ’ */</span>
<span class="nt">:root:lang(cs),       :not(:lang(cs)) &gt; :lang(cs)             </span><span class="p">{</span> <span class="k">quotes</span><span class="p">:</span> <span class="s">'\201e'</span> <span class="s">'\201c'</span> <span class="s">'\201a'</span> <span class="s">'\2018'</span> <span class="p">}</span> <span class="c">/* „ “ ‚ ‘ */</span>
<span class="nt">:root:lang(da),       :not(:lang(da)) &gt; :lang(da)             </span><span class="p">{</span> <span class="k">quotes</span><span class="p">:</span> <span class="s">'\201c'</span> <span class="s">'\201d'</span> <span class="s">'\2018'</span> <span class="s">'\2019'</span> <span class="p">}</span> <span class="c">/* “ ” ‘ ’ */</span>
<span class="nt">:root:lang(dav),      :not(:lang(dav)) &gt; :lang(dav)           </span><span class="p">{</span> <span class="k">quotes</span><span class="p">:</span> <span class="s">'\201c'</span> <span class="s">'\201d'</span> <span class="s">'\2018'</span> <span class="s">'\2019'</span> <span class="p">}</span> <span class="c">/* “ ” ‘ ’ */</span>
<span class="nt">:root:lang(de),       :not(:lang(de)) &gt; :lang(de)             </span><span class="p">{</span> <span class="k">quotes</span><span class="p">:</span> <span class="s">'\201e'</span> <span class="s">'\201c'</span> <span class="s">'\201a'</span> <span class="s">'\2018'</span> <span class="p">}</span> <span class="c">/* „ “ ‚ ‘ */</span>
<span class="nt">:root:lang(de-CH),    :not(:lang(de-CH)) &gt; :lang(de-CH)       </span><span class="p">{</span> <span class="k">quotes</span><span class="p">:</span> <span class="s">'\00ab'</span> <span class="s">'\00bb'</span> <span class="s">'\2039'</span> <span class="s">'\203a'</span> <span class="p">}</span> <span class="c">/* « » ‹ › */</span>
<span class="nt">:root:lang(dje),      :not(:lang(dje)) &gt; :lang(dje)           </span><span class="p">{</span> <span class="k">quotes</span><span class="p">:</span> <span class="s">'\201c'</span> <span class="s">'\201d'</span> <span class="s">'\2018'</span> <span class="s">'\2019'</span> <span class="p">}</span> <span class="c">/* “ ” ‘ ’ */</span>
<span class="nt">:root:lang(dua),      :not(:lang(dua)) &gt; :lang(dua)           </span><span class="p">{</span> <span class="k">quotes</span><span class="p">:</span> <span class="s">'\00ab'</span> <span class="s">'\00bb'</span> <span class="s">'\2018'</span> <span class="s">'\2019'</span> <span class="p">}</span> <span class="c">/* « » ‘ ’ */</span>
<span class="nt">:root:lang(dyo),      :not(:lang(dyo)) &gt; :lang(dyo)           </span><span class="p">{</span> <span class="k">quotes</span><span class="p">:</span> <span class="s">'\00ab'</span> <span class="s">'\00bb'</span> <span class="s">'\201c'</span> <span class="s">'\201d'</span> <span class="p">}</span> <span class="c">/* « » “ ” */</span>
<span class="nt">:root:lang(dz),       :not(:lang(dz)) &gt; :lang(dz)             </span><span class="p">{</span> <span class="k">quotes</span><span class="p">:</span> <span class="s">'\201c'</span> <span class="s">'\201d'</span> <span class="s">'\2018'</span> <span class="s">'\2019'</span> <span class="p">}</span> <span class="c">/* “ ” ‘ ’ */</span>
<span class="nt">:root:lang(ebu),      :not(:lang(ebu)) &gt; :lang(ebu)           </span><span class="p">{</span> <span class="k">quotes</span><span class="p">:</span> <span class="s">'\201c'</span> <span class="s">'\201d'</span> <span class="s">'\2018'</span> <span class="s">'\2019'</span> <span class="p">}</span> <span class="c">/* “ ” ‘ ’ */</span>
<span class="nt">:root:lang(ee),       :not(:lang(ee)) &gt; :lang(ee)             </span><span class="p">{</span> <span class="k">quotes</span><span class="p">:</span> <span class="s">'\201c'</span> <span class="s">'\201d'</span> <span class="s">'\2018'</span> <span class="s">'\2019'</span> <span class="p">}</span> <span class="c">/* “ ” ‘ ’ */</span>
<span class="nt">:root:lang(el),       :not(:lang(el)) &gt; :lang(el)             </span><span class="p">{</span> <span class="k">quotes</span><span class="p">:</span> <span class="s">'\00ab'</span> <span class="s">'\00bb'</span> <span class="s">'\201c'</span> <span class="s">'\201d'</span> <span class="p">}</span> <span class="c">/* « » “ ” */</span>
<span class="nt">:root:lang(en),       :not(:lang(en)) &gt; :lang(en)             </span><span class="p">{</span> <span class="k">quotes</span><span class="p">:</span> <span class="s">'\201c'</span> <span class="s">'\201d'</span> <span class="s">'\2018'</span> <span class="s">'\2019'</span> <span class="p">}</span> <span class="c">/* “ ” ‘ ’ */</span>
<span class="nt">:root:lang(es),       :not(:lang(es)) &gt; :lang(es)             </span><span class="p">{</span> <span class="k">quotes</span><span class="p">:</span> <span class="s">'\201c'</span> <span class="s">'\201d'</span> <span class="s">'\00ab'</span> <span class="s">'\00bb'</span> <span class="p">}</span> <span class="c">/* “ ” « » */</span>
<span class="nt">:root:lang(et),       :not(:lang(et)) &gt; :lang(et)             </span><span class="p">{</span> <span class="k">quotes</span><span class="p">:</span> <span class="s">'\201e'</span> <span class="s">'\201c'</span> <span class="s">'\201a'</span> <span class="s">'\2018'</span> <span class="p">}</span> <span class="c">/* „ “ ‚ ‘ */</span>
<span class="nt">:root:lang(eu),       :not(:lang(eu)) &gt; :lang(eu)             </span><span class="p">{</span> <span class="k">quotes</span><span class="p">:</span> <span class="s">'\201c'</span> <span class="s">'\201d'</span> <span class="s">'\00ab'</span> <span class="s">'\00bb'</span> <span class="p">}</span> <span class="c">/* “ ” « » */</span>
<span class="nt">:root:lang(ewo),      :not(:lang(ewo)) &gt; :lang(ewo)           </span><span class="p">{</span> <span class="k">quotes</span><span class="p">:</span> <span class="s">'\00ab'</span> <span class="s">'\00bb'</span> <span class="s">'\201c'</span> <span class="s">'\201d'</span> <span class="p">}</span> <span class="c">/* « » “ ” */</span>
<span class="nt">:root:lang(fa),       :not(:lang(fa)) &gt; :lang(fa)             </span><span class="p">{</span> <span class="k">quotes</span><span class="p">:</span> <span class="s">'\00ab'</span> <span class="s">'\00bb'</span> <span class="s">'\2039'</span> <span class="s">'\203a'</span> <span class="p">}</span> <span class="c">/* « » ‹ › */</span>
<span class="nt">:root:lang(ff),       :not(:lang(ff)) &gt; :lang(ff)             </span><span class="p">{</span> <span class="k">quotes</span><span class="p">:</span> <span class="s">'\201e'</span> <span class="s">'\201d'</span> <span class="s">'\201a'</span> <span class="s">'\2019'</span> <span class="p">}</span> <span class="c">/* „ ” ‚ ’ */</span>
<span class="nt">:root:lang(fi),       :not(:lang(fi)) &gt; :lang(fi)             </span><span class="p">{</span> <span class="k">quotes</span><span class="p">:</span> <span class="s">'\201d'</span> <span class="s">'\201d'</span> <span class="s">'\2019'</span> <span class="s">'\2019'</span> <span class="p">}</span> <span class="c">/* ” ” ’ ’ */</span>
<span class="nt">:root:lang(fr),       :not(:lang(fr)) &gt; :lang(fr)             </span><span class="p">{</span> <span class="k">quotes</span><span class="p">:</span> <span class="s">'\00ab'</span> <span class="s">'\00bb'</span> <span class="s">'\00ab'</span> <span class="s">'\00bb'</span> <span class="p">}</span> <span class="c">/* « » « » */</span>
<span class="nt">:root:lang(fr-CA),    :not(:lang(fr-CA)) &gt; :lang(fr-CA)       </span><span class="p">{</span> <span class="k">quotes</span><span class="p">:</span> <span class="s">'\00ab'</span> <span class="s">'\00bb'</span> <span class="s">'\2039'</span> <span class="s">'\203a'</span> <span class="p">}</span> <span class="c">/* « » ‹ › */</span>
<span class="nt">:root:lang(fr-CH),    :not(:lang(fr-CH)) &gt; :lang(fr-CH)       </span><span class="p">{</span> <span class="k">quotes</span><span class="p">:</span> <span class="s">'\00ab'</span> <span class="s">'\00bb'</span> <span class="s">'\2039'</span> <span class="s">'\203a'</span> <span class="p">}</span> <span class="c">/* « » ‹ › */</span>
<span class="nt">:root:lang(gsw),      :not(:lang(gsw)) &gt; :lang(gsw)           </span><span class="p">{</span> <span class="k">quotes</span><span class="p">:</span> <span class="s">'\00ab'</span> <span class="s">'\00bb'</span> <span class="s">'\2039'</span> <span class="s">'\203a'</span> <span class="p">}</span> <span class="c">/* « » ‹ › */</span>
<span class="nt">:root:lang(gu),       :not(:lang(gu)) &gt; :lang(gu)             </span><span class="p">{</span> <span class="k">quotes</span><span class="p">:</span> <span class="s">'\201c'</span> <span class="s">'\201d'</span> <span class="s">'\2018'</span> <span class="s">'\2019'</span> <span class="p">}</span> <span class="c">/* “ ” ‘ ’ */</span>
<span class="nt">:root:lang(guz),      :not(:lang(guz)) &gt; :lang(guz)           </span><span class="p">{</span> <span class="k">quotes</span><span class="p">:</span> <span class="s">'\201c'</span> <span class="s">'\201d'</span> <span class="s">'\2018'</span> <span class="s">'\2019'</span> <span class="p">}</span> <span class="c">/* “ ” ‘ ’ */</span>
<span class="nt">:root:lang(ha),       :not(:lang(ha)) &gt; :lang(ha)             </span><span class="p">{</span> <span class="k">quotes</span><span class="p">:</span> <span class="s">'\201c'</span> <span class="s">'\201d'</span> <span class="s">'\2018'</span> <span class="s">'\2019'</span> <span class="p">}</span> <span class="c">/* “ ” ‘ ’ */</span>
<span class="nt">:root:lang(he),       :not(:lang(he)) &gt; :lang(he)             </span><span class="p">{</span> <span class="k">quotes</span><span class="p">:</span> <span class="s">'\0022'</span> <span class="s">'\0022'</span> <span class="s">'\0027'</span> <span class="s">'\0027'</span> <span class="p">}</span> <span class="c">/* " " ' ' */</span>
<span class="nt">:root:lang(hi),       :not(:lang(hi)) &gt; :lang(hi)             </span><span class="p">{</span> <span class="k">quotes</span><span class="p">:</span> <span class="s">'\201c'</span> <span class="s">'\201d'</span> <span class="s">'\2018'</span> <span class="s">'\2019'</span> <span class="p">}</span> <span class="c">/* “ ” ‘ ’ */</span>
<span class="nt">:root:lang(hr),       :not(:lang(hr)) &gt; :lang(hr)             </span><span class="p">{</span> <span class="k">quotes</span><span class="p">:</span> <span class="s">'\201e'</span> <span class="s">'\201c'</span> <span class="s">'\201a'</span> <span class="s">'\2018'</span> <span class="p">}</span> <span class="c">/* „ “ ‚ ‘ */</span>
<span class="nt">:root:lang(hu),       :not(:lang(hu)) &gt; :lang(hu)             </span><span class="p">{</span> <span class="k">quotes</span><span class="p">:</span> <span class="s">'\201e'</span> <span class="s">'\201d'</span> <span class="s">'\00bb'</span> <span class="s">'\00ab'</span> <span class="p">}</span> <span class="c">/* „ ” » « */</span>
<span class="nt">:root:lang(id),       :not(:lang(id)) &gt; :lang(id)             </span><span class="p">{</span> <span class="k">quotes</span><span class="p">:</span> <span class="s">'\201c'</span> <span class="s">'\201d'</span> <span class="s">'\2018'</span> <span class="s">'\2019'</span> <span class="p">}</span> <span class="c">/* “ ” ‘ ’ */</span>
<span class="nt">:root:lang(ig),       :not(:lang(ig)) &gt; :lang(ig)             </span><span class="p">{</span> <span class="k">quotes</span><span class="p">:</span> <span class="s">'\201c'</span> <span class="s">'\201d'</span> <span class="s">'\2018'</span> <span class="s">'\2019'</span> <span class="p">}</span> <span class="c">/* “ ” ‘ ’ */</span>
<span class="nt">:root:lang(it),       :not(:lang(it)) &gt; :lang(it)             </span><span class="p">{</span> <span class="k">quotes</span><span class="p">:</span> <span class="s">'\00ab'</span> <span class="s">'\00bb'</span> <span class="s">'\201c'</span> <span class="s">'\201d'</span> <span class="p">}</span> <span class="c">/* « » “ ” */</span>
<span class="nt">:root:lang(ja),       :not(:lang(ja)) &gt; :lang(ja)             </span><span class="p">{</span> <span class="k">quotes</span><span class="p">:</span> <span class="s">'\300c'</span> <span class="s">'\300d'</span> <span class="s">'\300e'</span> <span class="s">'\300f'</span> <span class="p">}</span> <span class="c">/* 「 」 『 』 */</span>
<span class="nt">:root:lang(jgo),      :not(:lang(jgo)) &gt; :lang(jgo)           </span><span class="p">{</span> <span class="k">quotes</span><span class="p">:</span> <span class="s">'\00ab'</span> <span class="s">'\00bb'</span> <span class="s">'\2039'</span> <span class="s">'\203a'</span> <span class="p">}</span> <span class="c">/* « » ‹ › */</span>
<span class="nt">:root:lang(jmc),      :not(:lang(jmc)) &gt; :lang(jmc)           </span><span class="p">{</span> <span class="k">quotes</span><span class="p">:</span> <span class="s">'\201c'</span> <span class="s">'\201d'</span> <span class="s">'\2018'</span> <span class="s">'\2019'</span> <span class="p">}</span> <span class="c">/* “ ” ‘ ’ */</span>
<span class="nt">:root:lang(kab),      :not(:lang(kab)) &gt; :lang(kab)           </span><span class="p">{</span> <span class="k">quotes</span><span class="p">:</span> <span class="s">'\00ab'</span> <span class="s">'\00bb'</span> <span class="s">'\201c'</span> <span class="s">'\201d'</span> <span class="p">}</span> <span class="c">/* « » “ ” */</span>
<span class="nt">:root:lang(kam),      :not(:lang(kam)) &gt; :lang(kam)           </span><span class="p">{</span> <span class="k">quotes</span><span class="p">:</span> <span class="s">'\201c'</span> <span class="s">'\201d'</span> <span class="s">'\2018'</span> <span class="s">'\2019'</span> <span class="p">}</span> <span class="c">/* “ ” ‘ ’ */</span>
<span class="nt">:root:lang(kde),      :not(:lang(kde)) &gt; :lang(kde)           </span><span class="p">{</span> <span class="k">quotes</span><span class="p">:</span> <span class="s">'\201c'</span> <span class="s">'\201d'</span> <span class="s">'\2018'</span> <span class="s">'\2019'</span> <span class="p">}</span> <span class="c">/* “ ” ‘ ’ */</span>
<span class="nt">:root:lang(kea),      :not(:lang(kea)) &gt; :lang(kea)           </span><span class="p">{</span> <span class="k">quotes</span><span class="p">:</span> <span class="s">'\201c'</span> <span class="s">'\201d'</span> <span class="s">'\2018'</span> <span class="s">'\2019'</span> <span class="p">}</span> <span class="c">/* “ ” ‘ ’ */</span>
<span class="nt">:root:lang(khq),      :not(:lang(khq)) &gt; :lang(khq)           </span><span class="p">{</span> <span class="k">quotes</span><span class="p">:</span> <span class="s">'\201c'</span> <span class="s">'\201d'</span> <span class="s">'\2018'</span> <span class="s">'\2019'</span> <span class="p">}</span> <span class="c">/* “ ” ‘ ’ */</span>
<span class="nt">:root:lang(ki),       :not(:lang(ki)) &gt; :lang(ki)             </span><span class="p">{</span> <span class="k">quotes</span><span class="p">:</span> <span class="s">'\201c'</span> <span class="s">'\201d'</span> <span class="s">'\2018'</span> <span class="s">'\2019'</span> <span class="p">}</span> <span class="c">/* “ ” ‘ ’ */</span>
<span class="nt">:root:lang(kkj),      :not(:lang(kkj)) &gt; :lang(kkj)           </span><span class="p">{</span> <span class="k">quotes</span><span class="p">:</span> <span class="s">'\00ab'</span> <span class="s">'\00bb'</span> <span class="s">'\2039'</span> <span class="s">'\203a'</span> <span class="p">}</span> <span class="c">/* « » ‹ › */</span>
<span class="nt">:root:lang(kln),      :not(:lang(kln)) &gt; :lang(kln)           </span><span class="p">{</span> <span class="k">quotes</span><span class="p">:</span> <span class="s">'\201c'</span> <span class="s">'\201d'</span> <span class="s">'\2018'</span> <span class="s">'\2019'</span> <span class="p">}</span> <span class="c">/* “ ” ‘ ’ */</span>
<span class="nt">:root:lang(km),       :not(:lang(km)) &gt; :lang(km)             </span><span class="p">{</span> <span class="k">quotes</span><span class="p">:</span> <span class="s">'\201c'</span> <span class="s">'\201d'</span> <span class="s">'\2018'</span> <span class="s">'\2019'</span> <span class="p">}</span> <span class="c">/* “ ” ‘ ’ */</span>
<span class="nt">:root:lang(kn),       :not(:lang(kn)) &gt; :lang(kn)             </span><span class="p">{</span> <span class="k">quotes</span><span class="p">:</span> <span class="s">'\201c'</span> <span class="s">'\201d'</span> <span class="s">'\2018'</span> <span class="s">'\2019'</span> <span class="p">}</span> <span class="c">/* “ ” ‘ ’ */</span>
<span class="nt">:root:lang(ko),       :not(:lang(ko)) &gt; :lang(ko)             </span><span class="p">{</span> <span class="k">quotes</span><span class="p">:</span> <span class="s">'\201c'</span> <span class="s">'\201d'</span> <span class="s">'\2018'</span> <span class="s">'\2019'</span> <span class="p">}</span> <span class="c">/* “ ” ‘ ’ */</span>
<span class="nt">:root:lang(ksb),      :not(:lang(ksb)) &gt; :lang(ksb)           </span><span class="p">{</span> <span class="k">quotes</span><span class="p">:</span> <span class="s">'\201c'</span> <span class="s">'\201d'</span> <span class="s">'\2018'</span> <span class="s">'\2019'</span> <span class="p">}</span> <span class="c">/* “ ” ‘ ’ */</span>
<span class="nt">:root:lang(ksf),      :not(:lang(ksf)) &gt; :lang(ksf)           </span><span class="p">{</span> <span class="k">quotes</span><span class="p">:</span> <span class="s">'\00ab'</span> <span class="s">'\00bb'</span> <span class="s">'\2018'</span> <span class="s">'\2019'</span> <span class="p">}</span> <span class="c">/* « » ‘ ’ */</span>
<span class="nt">:root:lang(lag),      :not(:lang(lag)) &gt; :lang(lag)           </span><span class="p">{</span> <span class="k">quotes</span><span class="p">:</span> <span class="s">'\201d'</span> <span class="s">'\201d'</span> <span class="s">'\2019'</span> <span class="s">'\2019'</span> <span class="p">}</span> <span class="c">/* ” ” ’ ’ */</span>
<span class="nt">:root:lang(lg),       :not(:lang(lg)) &gt; :lang(lg)             </span><span class="p">{</span> <span class="k">quotes</span><span class="p">:</span> <span class="s">'\201c'</span> <span class="s">'\201d'</span> <span class="s">'\2018'</span> <span class="s">'\2019'</span> <span class="p">}</span> <span class="c">/* “ ” ‘ ’ */</span>
<span class="nt">:root:lang(ln),       :not(:lang(ln)) &gt; :lang(ln)             </span><span class="p">{</span> <span class="k">quotes</span><span class="p">:</span> <span class="s">'\201c'</span> <span class="s">'\201d'</span> <span class="s">'\2018'</span> <span class="s">'\2019'</span> <span class="p">}</span> <span class="c">/* “ ” ‘ ’ */</span>
<span class="nt">:root:lang(lo),       :not(:lang(lo)) &gt; :lang(lo)             </span><span class="p">{</span> <span class="k">quotes</span><span class="p">:</span> <span class="s">'\201c'</span> <span class="s">'\201d'</span> <span class="s">'\2018'</span> <span class="s">'\2019'</span> <span class="p">}</span> <span class="c">/* “ ” ‘ ’ */</span>
<span class="nt">:root:lang(lt),       :not(:lang(lt)) &gt; :lang(lt)             </span><span class="p">{</span> <span class="k">quotes</span><span class="p">:</span> <span class="s">'\201e'</span> <span class="s">'\201c'</span> <span class="s">'\201e'</span> <span class="s">'\201c'</span> <span class="p">}</span> <span class="c">/* „ “ „ “ */</span>
<span class="nt">:root:lang(lu),       :not(:lang(lu)) &gt; :lang(lu)             </span><span class="p">{</span> <span class="k">quotes</span><span class="p">:</span> <span class="s">'\201c'</span> <span class="s">'\201d'</span> <span class="s">'\2018'</span> <span class="s">'\2019'</span> <span class="p">}</span> <span class="c">/* “ ” ‘ ’ */</span>
<span class="nt">:root:lang(luo),      :not(:lang(luo)) &gt; :lang(luo)           </span><span class="p">{</span> <span class="k">quotes</span><span class="p">:</span> <span class="s">'\201c'</span> <span class="s">'\201d'</span> <span class="s">'\2018'</span> <span class="s">'\2019'</span> <span class="p">}</span> <span class="c">/* “ ” ‘ ’ */</span>
<span class="nt">:root:lang(luy),      :not(:lang(luy)) &gt; :lang(luy)           </span><span class="p">{</span> <span class="k">quotes</span><span class="p">:</span> <span class="s">'\201e'</span> <span class="s">'\201c'</span> <span class="s">'\201a'</span> <span class="s">'\2018'</span> <span class="p">}</span> <span class="c">/* „ “ ‚ ‘ */</span>
<span class="nt">:root:lang(lv),       :not(:lang(lv)) &gt; :lang(lv)             </span><span class="p">{</span> <span class="k">quotes</span><span class="p">:</span> <span class="s">'\201c'</span> <span class="s">'\201d'</span> <span class="s">'\2018'</span> <span class="s">'\2019'</span> <span class="p">}</span> <span class="c">/* “ ” ‘ ’ */</span>
<span class="nt">:root:lang(mas),      :not(:lang(mas)) &gt; :lang(mas)           </span><span class="p">{</span> <span class="k">quotes</span><span class="p">:</span> <span class="s">'\201c'</span> <span class="s">'\201d'</span> <span class="s">'\2018'</span> <span class="s">'\2019'</span> <span class="p">}</span> <span class="c">/* “ ” ‘ ’ */</span>
<span class="nt">:root:lang(mer),      :not(:lang(mer)) &gt; :lang(mer)           </span><span class="p">{</span> <span class="k">quotes</span><span class="p">:</span> <span class="s">'\201c'</span> <span class="s">'\201d'</span> <span class="s">'\2018'</span> <span class="s">'\2019'</span> <span class="p">}</span> <span class="c">/* “ ” ‘ ’ */</span>
<span class="nt">:root:lang(mfe),      :not(:lang(mfe)) &gt; :lang(mfe)           </span><span class="p">{</span> <span class="k">quotes</span><span class="p">:</span> <span class="s">'\201c'</span> <span class="s">'\201d'</span> <span class="s">'\2018'</span> <span class="s">'\2019'</span> <span class="p">}</span> <span class="c">/* “ ” ‘ ’ */</span>
<span class="nt">:root:lang(mg),       :not(:lang(mg)) &gt; :lang(mg)             </span><span class="p">{</span> <span class="k">quotes</span><span class="p">:</span> <span class="s">'\00ab'</span> <span class="s">'\00bb'</span> <span class="s">'\201c'</span> <span class="s">'\201d'</span> <span class="p">}</span> <span class="c">/* « » “ ” */</span>
<span class="nt">:root:lang(mgo),      :not(:lang(mgo)) &gt; :lang(mgo)           </span><span class="p">{</span> <span class="k">quotes</span><span class="p">:</span> <span class="s">'\201c'</span> <span class="s">'\201d'</span> <span class="s">'\2018'</span> <span class="s">'\2019'</span> <span class="p">}</span> <span class="c">/* “ ” ‘ ’ */</span>
<span class="nt">:root:lang(mk),       :not(:lang(mk)) &gt; :lang(mk)             </span><span class="p">{</span> <span class="k">quotes</span><span class="p">:</span> <span class="s">'\201e'</span> <span class="s">'\201c'</span> <span class="s">'\201a'</span> <span class="s">'\2018'</span> <span class="p">}</span> <span class="c">/* „ “ ‚ ‘ */</span>
<span class="nt">:root:lang(ml),       :not(:lang(ml)) &gt; :lang(ml)             </span><span class="p">{</span> <span class="k">quotes</span><span class="p">:</span> <span class="s">'\201c'</span> <span class="s">'\201d'</span> <span class="s">'\2018'</span> <span class="s">'\2019'</span> <span class="p">}</span> <span class="c">/* “ ” ‘ ’ */</span>
<span class="nt">:root:lang(mr),       :not(:lang(mr)) &gt; :lang(mr)             </span><span class="p">{</span> <span class="k">quotes</span><span class="p">:</span> <span class="s">'\201c'</span> <span class="s">'\201d'</span> <span class="s">'\2018'</span> <span class="s">'\2019'</span> <span class="p">}</span> <span class="c">/* “ ” ‘ ’ */</span>
<span class="nt">:root:lang(ms),       :not(:lang(ms)) &gt; :lang(ms)             </span><span class="p">{</span> <span class="k">quotes</span><span class="p">:</span> <span class="s">'\201c'</span> <span class="s">'\201d'</span> <span class="s">'\2018'</span> <span class="s">'\2019'</span> <span class="p">}</span> <span class="c">/* “ ” ‘ ’ */</span>
<span class="nt">:root:lang(mua),      :not(:lang(mua)) &gt; :lang(mua)           </span><span class="p">{</span> <span class="k">quotes</span><span class="p">:</span> <span class="s">'\00ab'</span> <span class="s">'\00bb'</span> <span class="s">'\201c'</span> <span class="s">'\201d'</span> <span class="p">}</span> <span class="c">/* « » “ ” */</span>
<span class="nt">:root:lang(my),       :not(:lang(my)) &gt; :lang(my)             </span><span class="p">{</span> <span class="k">quotes</span><span class="p">:</span> <span class="s">'\201c'</span> <span class="s">'\201d'</span> <span class="s">'\2018'</span> <span class="s">'\2019'</span> <span class="p">}</span> <span class="c">/* “ ” ‘ ’ */</span>
<span class="nt">:root:lang(naq),      :not(:lang(naq)) &gt; :lang(naq)           </span><span class="p">{</span> <span class="k">quotes</span><span class="p">:</span> <span class="s">'\201c'</span> <span class="s">'\201d'</span> <span class="s">'\2018'</span> <span class="s">'\2019'</span> <span class="p">}</span> <span class="c">/* “ ” ‘ ’ */</span>
<span class="nt">:root:lang(nb),       :not(:lang(nb)) &gt; :lang(nb)             </span><span class="p">{</span> <span class="k">quotes</span><span class="p">:</span> <span class="s">'\00ab'</span> <span class="s">'\00bb'</span> <span class="s">'\2018'</span> <span class="s">'\2019'</span> <span class="p">}</span> <span class="c">/* « » ‘ ’ */</span>
<span class="nt">:root:lang(nd),       :not(:lang(nd)) &gt; :lang(nd)             </span><span class="p">{</span> <span class="k">quotes</span><span class="p">:</span> <span class="s">'\201c'</span> <span class="s">'\201d'</span> <span class="s">'\2018'</span> <span class="s">'\2019'</span> <span class="p">}</span> <span class="c">/* “ ” ‘ ’ */</span>
<span class="nt">:root:lang(nl),       :not(:lang(nl)) &gt; :lang(nl)             </span><span class="p">{</span> <span class="k">quotes</span><span class="p">:</span> <span class="s">'\201c'</span> <span class="s">'\201d'</span> <span class="s">'\2018'</span> <span class="s">'\2019'</span> <span class="p">}</span> <span class="c">/* “ ” ‘ ’ */</span>
<span class="nt">:root:lang(nmg),      :not(:lang(nmg)) &gt; :lang(nmg)           </span><span class="p">{</span> <span class="k">quotes</span><span class="p">:</span> <span class="s">'\201e'</span> <span class="s">'\201d'</span> <span class="s">'\00ab'</span> <span class="s">'\00bb'</span> <span class="p">}</span> <span class="c">/* „ ” « » */</span>
<span class="nt">:root:lang(nn),       :not(:lang(nn)) &gt; :lang(nn)             </span><span class="p">{</span> <span class="k">quotes</span><span class="p">:</span> <span class="s">'\00ab'</span> <span class="s">'\00bb'</span> <span class="s">'\2018'</span> <span class="s">'\2019'</span> <span class="p">}</span> <span class="c">/* « » ‘ ’ */</span>
<span class="nt">:root:lang(nnh),      :not(:lang(nnh)) &gt; :lang(nnh)           </span><span class="p">{</span> <span class="k">quotes</span><span class="p">:</span> <span class="s">'\00ab'</span> <span class="s">'\00bb'</span> <span class="s">'\201c'</span> <span class="s">'\201d'</span> <span class="p">}</span> <span class="c">/* « » “ ” */</span>
<span class="nt">:root:lang(nus),      :not(:lang(nus)) &gt; :lang(nus)           </span><span class="p">{</span> <span class="k">quotes</span><span class="p">:</span> <span class="s">'\201c'</span> <span class="s">'\201d'</span> <span class="s">'\2018'</span> <span class="s">'\2019'</span> <span class="p">}</span> <span class="c">/* “ ” ‘ ’ */</span>
<span class="nt">:root:lang(nyn),      :not(:lang(nyn)) &gt; :lang(nyn)           </span><span class="p">{</span> <span class="k">quotes</span><span class="p">:</span> <span class="s">'\201c'</span> <span class="s">'\201d'</span> <span class="s">'\2018'</span> <span class="s">'\2019'</span> <span class="p">}</span> <span class="c">/* “ ” ‘ ’ */</span>
<span class="nt">:root:lang(pl),       :not(:lang(pl)) &gt; :lang(pl)             </span><span class="p">{</span> <span class="k">quotes</span><span class="p">:</span> <span class="s">'\201e'</span> <span class="s">'\201d'</span> <span class="s">'\00ab'</span> <span class="s">'\00bb'</span> <span class="p">}</span> <span class="c">/* „ ” « » */</span>
<span class="nt">:root:lang(pt),       :not(:lang(pt)) &gt; :lang(pt)             </span><span class="p">{</span> <span class="k">quotes</span><span class="p">:</span> <span class="s">'\201c'</span> <span class="s">'\201d'</span> <span class="s">'\2018'</span> <span class="s">'\2019'</span> <span class="p">}</span> <span class="c">/* “ ” ‘ ’ */</span>
<span class="nt">:root:lang(pt-PT),    :not(:lang(pt-PT)) &gt; :lang(pt-PT)       </span><span class="p">{</span> <span class="k">quotes</span><span class="p">:</span> <span class="s">'\00ab'</span> <span class="s">'\00bb'</span> <span class="s">'\201c'</span> <span class="s">'\201d'</span> <span class="p">}</span> <span class="c">/* « » “ ” */</span>
<span class="nt">:root:lang(rn),       :not(:lang(rn)) &gt; :lang(rn)             </span><span class="p">{</span> <span class="k">quotes</span><span class="p">:</span> <span class="s">'\201d'</span> <span class="s">'\201d'</span> <span class="s">'\2019'</span> <span class="s">'\2019'</span> <span class="p">}</span> <span class="c">/* ” ” ’ ’ */</span>
<span class="nt">:root:lang(ro),       :not(:lang(ro)) &gt; :lang(ro)             </span><span class="p">{</span> <span class="k">quotes</span><span class="p">:</span> <span class="s">'\201e'</span> <span class="s">'\201d'</span> <span class="s">'\00ab'</span> <span class="s">'\00bb'</span> <span class="p">}</span> <span class="c">/* „ ” « » */</span>
<span class="nt">:root:lang(rof),      :not(:lang(rof)) &gt; :lang(rof)           </span><span class="p">{</span> <span class="k">quotes</span><span class="p">:</span> <span class="s">'\201c'</span> <span class="s">'\201d'</span> <span class="s">'\2018'</span> <span class="s">'\2019'</span> <span class="p">}</span> <span class="c">/* “ ” ‘ ’ */</span>
<span class="nt">:root:lang(ru),       :not(:lang(ru)) &gt; :lang(ru)             </span><span class="p">{</span> <span class="k">quotes</span><span class="p">:</span> <span class="s">'\00ab'</span> <span class="s">'\00bb'</span> <span class="s">'\201e'</span> <span class="s">'\201c'</span> <span class="p">}</span> <span class="c">/* « » „ “ */</span>
<span class="nt">:root:lang(rw),       :not(:lang(rw)) &gt; :lang(rw)             </span><span class="p">{</span> <span class="k">quotes</span><span class="p">:</span> <span class="s">'\00ab'</span> <span class="s">'\00bb'</span> <span class="s">'\2018'</span> <span class="s">'\2019'</span> <span class="p">}</span> <span class="c">/* « » ‘ ’ */</span>
<span class="nt">:root:lang(rwk),      :not(:lang(rwk)) &gt; :lang(rwk)           </span><span class="p">{</span> <span class="k">quotes</span><span class="p">:</span> <span class="s">'\201c'</span> <span class="s">'\201d'</span> <span class="s">'\2018'</span> <span class="s">'\2019'</span> <span class="p">}</span> <span class="c">/* “ ” ‘ ’ */</span>
<span class="nt">:root:lang(saq),      :not(:lang(saq)) &gt; :lang(saq)           </span><span class="p">{</span> <span class="k">quotes</span><span class="p">:</span> <span class="s">'\201c'</span> <span class="s">'\201d'</span> <span class="s">'\2018'</span> <span class="s">'\2019'</span> <span class="p">}</span> <span class="c">/* “ ” ‘ ’ */</span>
<span class="nt">:root:lang(sbp),      :not(:lang(sbp)) &gt; :lang(sbp)           </span><span class="p">{</span> <span class="k">quotes</span><span class="p">:</span> <span class="s">'\201c'</span> <span class="s">'\201d'</span> <span class="s">'\2018'</span> <span class="s">'\2019'</span> <span class="p">}</span> <span class="c">/* “ ” ‘ ’ */</span>
<span class="nt">:root:lang(seh),      :not(:lang(seh)) &gt; :lang(seh)           </span><span class="p">{</span> <span class="k">quotes</span><span class="p">:</span> <span class="s">'\201c'</span> <span class="s">'\201d'</span> <span class="s">'\2018'</span> <span class="s">'\2019'</span> <span class="p">}</span> <span class="c">/* “ ” ‘ ’ */</span>
<span class="nt">:root:lang(ses),      :not(:lang(ses)) &gt; :lang(ses)           </span><span class="p">{</span> <span class="k">quotes</span><span class="p">:</span> <span class="s">'\201c'</span> <span class="s">'\201d'</span> <span class="s">'\2018'</span> <span class="s">'\2019'</span> <span class="p">}</span> <span class="c">/* “ ” ‘ ’ */</span>
<span class="nt">:root:lang(sg),       :not(:lang(sg)) &gt; :lang(sg)             </span><span class="p">{</span> <span class="k">quotes</span><span class="p">:</span> <span class="s">'\00ab'</span> <span class="s">'\00bb'</span> <span class="s">'\201c'</span> <span class="s">'\201d'</span> <span class="p">}</span> <span class="c">/* « » “ ” */</span>
<span class="nt">:root:lang(shi),      :not(:lang(shi)) &gt; :lang(shi)           </span><span class="p">{</span> <span class="k">quotes</span><span class="p">:</span> <span class="s">'\00ab'</span> <span class="s">'\00bb'</span> <span class="s">'\201e'</span> <span class="s">'\201d'</span> <span class="p">}</span> <span class="c">/* « » „ ” */</span>
<span class="nt">:root:lang(shi-Latn), :not(:lang(shi-Latn)) &gt; :lang(shi-Latn) </span><span class="p">{</span> <span class="k">quotes</span><span class="p">:</span> <span class="s">'\00ab'</span> <span class="s">'\00bb'</span> <span class="s">'\201e'</span> <span class="s">'\201d'</span> <span class="p">}</span> <span class="c">/* « » „ ” */</span>
<span class="nt">:root:lang(si),       :not(:lang(si)) &gt; :lang(si)             </span><span class="p">{</span> <span class="k">quotes</span><span class="p">:</span> <span class="s">'\201c'</span> <span class="s">'\201d'</span> <span class="s">'\2018'</span> <span class="s">'\2019'</span> <span class="p">}</span> <span class="c">/* “ ” ‘ ’ */</span>
<span class="nt">:root:lang(sk),       :not(:lang(sk)) &gt; :lang(sk)             </span><span class="p">{</span> <span class="k">quotes</span><span class="p">:</span> <span class="s">'\201e'</span> <span class="s">'\201c'</span> <span class="s">'\201a'</span> <span class="s">'\2018'</span> <span class="p">}</span> <span class="c">/* „ “ ‚ ‘ */</span>
<span class="nt">:root:lang(sl),       :not(:lang(sl)) &gt; :lang(sl)             </span><span class="p">{</span> <span class="k">quotes</span><span class="p">:</span> <span class="s">'\201e'</span> <span class="s">'\201c'</span> <span class="s">'\201a'</span> <span class="s">'\2018'</span> <span class="p">}</span> <span class="c">/* „ “ ‚ ‘ */</span>
<span class="nt">:root:lang(sn),       :not(:lang(sn)) &gt; :lang(sn)             </span><span class="p">{</span> <span class="k">quotes</span><span class="p">:</span> <span class="s">'\201d'</span> <span class="s">'\201d'</span> <span class="s">'\2019'</span> <span class="s">'\2019'</span> <span class="p">}</span> <span class="c">/* ” ” ’ ’ */</span>
<span class="nt">:root:lang(so),       :not(:lang(so)) &gt; :lang(so)             </span><span class="p">{</span> <span class="k">quotes</span><span class="p">:</span> <span class="s">'\201c'</span> <span class="s">'\201d'</span> <span class="s">'\2018'</span> <span class="s">'\2019'</span> <span class="p">}</span> <span class="c">/* “ ” ‘ ’ */</span>
<span class="nt">:root:lang(sq),       :not(:lang(sq)) &gt; :lang(sq)             </span><span class="p">{</span> <span class="k">quotes</span><span class="p">:</span> <span class="s">'\201e'</span> <span class="s">'\201c'</span> <span class="s">'\201a'</span> <span class="s">'\2018'</span> <span class="p">}</span> <span class="c">/* „ “ ‚ ‘ */</span>
<span class="nt">:root:lang(sr),       :not(:lang(sr)) &gt; :lang(sr)             </span><span class="p">{</span> <span class="k">quotes</span><span class="p">:</span> <span class="s">'\201e'</span> <span class="s">'\201c'</span> <span class="s">'\201a'</span> <span class="s">'\2018'</span> <span class="p">}</span> <span class="c">/* „ “ ‚ ‘ */</span>
<span class="nt">:root:lang(sr-Latn),  :not(:lang(sr-Latn)) &gt; :lang(sr-Latn)   </span><span class="p">{</span> <span class="k">quotes</span><span class="p">:</span> <span class="s">'\201e'</span> <span class="s">'\201c'</span> <span class="s">'\201a'</span> <span class="s">'\2018'</span> <span class="p">}</span> <span class="c">/* „ “ ‚ ‘ */</span>
<span class="nt">:root:lang(sv),       :not(:lang(sv)) &gt; :lang(sv)             </span><span class="p">{</span> <span class="k">quotes</span><span class="p">:</span> <span class="s">'\201d'</span> <span class="s">'\201d'</span> <span class="s">'\2019'</span> <span class="s">'\2019'</span> <span class="p">}</span> <span class="c">/* ” ” ’ ’ */</span>
<span class="nt">:root:lang(sw),       :not(:lang(sw)) &gt; :lang(sw)             </span><span class="p">{</span> <span class="k">quotes</span><span class="p">:</span> <span class="s">'\201c'</span> <span class="s">'\201d'</span> <span class="s">'\2018'</span> <span class="s">'\2019'</span> <span class="p">}</span> <span class="c">/* “ ” ‘ ’ */</span>
<span class="nt">:root:lang(swc),      :not(:lang(swc)) &gt; :lang(swc)           </span><span class="p">{</span> <span class="k">quotes</span><span class="p">:</span> <span class="s">'\201c'</span> <span class="s">'\201d'</span> <span class="s">'\2018'</span> <span class="s">'\2019'</span> <span class="p">}</span> <span class="c">/* “ ” ‘ ’ */</span>
<span class="nt">:root:lang(ta),       :not(:lang(ta)) &gt; :lang(ta)             </span><span class="p">{</span> <span class="k">quotes</span><span class="p">:</span> <span class="s">'\201c'</span> <span class="s">'\201d'</span> <span class="s">'\2018'</span> <span class="s">'\2019'</span> <span class="p">}</span> <span class="c">/* “ ” ‘ ’ */</span>
<span class="nt">:root:lang(te),       :not(:lang(te)) &gt; :lang(te)             </span><span class="p">{</span> <span class="k">quotes</span><span class="p">:</span> <span class="s">'\201c'</span> <span class="s">'\201d'</span> <span class="s">'\2018'</span> <span class="s">'\2019'</span> <span class="p">}</span> <span class="c">/* “ ” ‘ ’ */</span>
<span class="nt">:root:lang(teo),      :not(:lang(teo)) &gt; :lang(teo)           </span><span class="p">{</span> <span class="k">quotes</span><span class="p">:</span> <span class="s">'\201c'</span> <span class="s">'\201d'</span> <span class="s">'\2018'</span> <span class="s">'\2019'</span> <span class="p">}</span> <span class="c">/* “ ” ‘ ’ */</span>
<span class="nt">:root:lang(th),       :not(:lang(th)) &gt; :lang(th)             </span><span class="p">{</span> <span class="k">quotes</span><span class="p">:</span> <span class="s">'\201c'</span> <span class="s">'\201d'</span> <span class="s">'\2018'</span> <span class="s">'\2019'</span> <span class="p">}</span> <span class="c">/* “ ” ‘ ’ */</span>
<span class="nt">:root:lang(ti-ER),    :not(:lang(ti-ER)) &gt; :lang(ti-ER)       </span><span class="p">{</span> <span class="k">quotes</span><span class="p">:</span> <span class="s">'\2018'</span> <span class="s">'\2019'</span> <span class="s">'\201c'</span> <span class="s">'\201d'</span> <span class="p">}</span> <span class="c">/* ‘ ’ “ ” */</span>
<span class="nt">:root:lang(to),       :not(:lang(to)) &gt; :lang(to)             </span><span class="p">{</span> <span class="k">quotes</span><span class="p">:</span> <span class="s">'\201c'</span> <span class="s">'\201d'</span> <span class="s">'\2018'</span> <span class="s">'\2019'</span> <span class="p">}</span> <span class="c">/* “ ” ‘ ’ */</span>
<span class="nt">:root:lang(tr),       :not(:lang(tr)) &gt; :lang(tr)             </span><span class="p">{</span> <span class="k">quotes</span><span class="p">:</span> <span class="s">'\201c'</span> <span class="s">'\201d'</span> <span class="s">'\2018'</span> <span class="s">'\2019'</span> <span class="p">}</span> <span class="c">/* “ ” ‘ ’ */</span>
<span class="nt">:root:lang(twq),      :not(:lang(twq)) &gt; :lang(twq)           </span><span class="p">{</span> <span class="k">quotes</span><span class="p">:</span> <span class="s">'\201c'</span> <span class="s">'\201d'</span> <span class="s">'\2018'</span> <span class="s">'\2019'</span> <span class="p">}</span> <span class="c">/* “ ” ‘ ’ */</span>
<span class="nt">:root:lang(tzm),      :not(:lang(tzm)) &gt; :lang(tzm)           </span><span class="p">{</span> <span class="k">quotes</span><span class="p">:</span> <span class="s">'\201c'</span> <span class="s">'\201d'</span> <span class="s">'\2018'</span> <span class="s">'\2019'</span> <span class="p">}</span> <span class="c">/* “ ” ‘ ’ */</span>
<span class="nt">:root:lang(uk),       :not(:lang(uk)) &gt; :lang(uk)             </span><span class="p">{</span> <span class="k">quotes</span><span class="p">:</span> <span class="s">'\00ab'</span> <span class="s">'\00bb'</span> <span class="s">'\201e'</span> <span class="s">'\201c'</span> <span class="p">}</span> <span class="c">/* « » „ “ */</span>
<span class="nt">:root:lang(ur),       :not(:lang(ur)) &gt; :lang(ur)             </span><span class="p">{</span> <span class="k">quotes</span><span class="p">:</span> <span class="s">'\201d'</span> <span class="s">'\201c'</span> <span class="s">'\2019'</span> <span class="s">'\2018'</span> <span class="p">}</span> <span class="c">/* ” “ ’ ‘ */</span>
<span class="nt">:root:lang(vai),      :not(:lang(vai)) &gt; :lang(vai)           </span><span class="p">{</span> <span class="k">quotes</span><span class="p">:</span> <span class="s">'\201c'</span> <span class="s">'\201d'</span> <span class="s">'\2018'</span> <span class="s">'\2019'</span> <span class="p">}</span> <span class="c">/* “ ” ‘ ’ */</span>
<span class="nt">:root:lang(vai-Latn), :not(:lang(vai-Latn)) &gt; :lang(vai-Latn) </span><span class="p">{</span> <span class="k">quotes</span><span class="p">:</span> <span class="s">'\201c'</span> <span class="s">'\201d'</span> <span class="s">'\2018'</span> <span class="s">'\2019'</span> <span class="p">}</span> <span class="c">/* “ ” ‘ ’ */</span>
<span class="nt">:root:lang(vi),       :not(:lang(vi)) &gt; :lang(vi)             </span><span class="p">{</span> <span class="k">quotes</span><span class="p">:</span> <span class="s">'\201c'</span> <span class="s">'\201d'</span> <span class="s">'\2018'</span> <span class="s">'\2019'</span> <span class="p">}</span> <span class="c">/* “ ” ‘ ’ */</span>
<span class="nt">:root:lang(vun),      :not(:lang(vun)) &gt; :lang(vun)           </span><span class="p">{</span> <span class="k">quotes</span><span class="p">:</span> <span class="s">'\201c'</span> <span class="s">'\201d'</span> <span class="s">'\2018'</span> <span class="s">'\2019'</span> <span class="p">}</span> <span class="c">/* “ ” ‘ ’ */</span>
<span class="nt">:root:lang(xh),       :not(:lang(xh)) &gt; :lang(xh)             </span><span class="p">{</span> <span class="k">quotes</span><span class="p">:</span> <span class="s">'\2018'</span> <span class="s">'\2019'</span> <span class="s">'\201c'</span> <span class="s">'\201d'</span> <span class="p">}</span> <span class="c">/* ‘ ’ “ ” */</span>
<span class="nt">:root:lang(xog),      :not(:lang(xog)) &gt; :lang(xog)           </span><span class="p">{</span> <span class="k">quotes</span><span class="p">:</span> <span class="s">'\201c'</span> <span class="s">'\201d'</span> <span class="s">'\2018'</span> <span class="s">'\2019'</span> <span class="p">}</span> <span class="c">/* “ ” ‘ ’ */</span>
<span class="nt">:root:lang(yav),      :not(:lang(yav)) &gt; :lang(yav)           </span><span class="p">{</span> <span class="k">quotes</span><span class="p">:</span> <span class="s">'\00ab'</span> <span class="s">'\00bb'</span> <span class="s">'\00ab'</span> <span class="s">'\00bb'</span> <span class="p">}</span> <span class="c">/* « » « » */</span>
<span class="nt">:root:lang(yo),       :not(:lang(yo)) &gt; :lang(yo)             </span><span class="p">{</span> <span class="k">quotes</span><span class="p">:</span> <span class="s">'\201c'</span> <span class="s">'\201d'</span> <span class="s">'\2018'</span> <span class="s">'\2019'</span> <span class="p">}</span> <span class="c">/* “ ” ‘ ’ */</span>
<span class="nt">:root:lang(zh),       :not(:lang(zh)) &gt; :lang(zh)             </span><span class="p">{</span> <span class="k">quotes</span><span class="p">:</span> <span class="s">'\201c'</span> <span class="s">'\201d'</span> <span class="s">'\2018'</span> <span class="s">'\2019'</span> <span class="p">}</span> <span class="c">/* “ ” ‘ ’ */</span>
<span class="nt">:root:lang(zh-Hant),  :not(:lang(zh-Hant)) &gt; :lang(zh-Hant)   </span><span class="p">{</span> <span class="k">quotes</span><span class="p">:</span> <span class="s">'\300c'</span> <span class="s">'\300d'</span> <span class="s">'\300e'</span> <span class="s">'\300f'</span> <span class="p">}</span> <span class="c">/* 「 」 『 』 */</span>
<span class="nt">:root:lang(zu),       :not(:lang(zu)) &gt; :lang(zu)             </span><span class="p">{</span> <span class="k">quotes</span><span class="p">:</span> <span class="s">'\201c'</span> <span class="s">'\201d'</span> <span class="s">'\2018'</span> <span class="s">'\2019'</span> <span class="p">}</span> <span class="c">/* “ ” ‘ ’ */</span>
</pre>
    <h4 class="heading settled" data-level="10.3.7" id="sections-and-headings"><span class="secno">10.3.7. </span><span class="content">Sections and headings</span><a class="self-link" href="rendering.html#sections-and-headings"></a></h4>
<pre class="highlight"><span class="n">@namespace</span> <span class="nf">url</span><span class="p">(</span><span class="s">http://www.w3.org/1999/xhtml</span><span class="p">);</span>

<span class="nt">article, aside, h1, h2, h3, h4, h5, h6, nav, section </span><span class="p">{</span>
  <span class="k">display</span><span class="p">:</span> block<span class="p">;</span>
<span class="p">}</span>

<span class="nt">h1 </span><span class="p">{</span> <span class="k">margin-top</span><span class="p">:</span> <span class="m">0</span>.67em; margin-bottom: 0.67em; font-size: 2.00em; font-weight: bold; }
h2 { margin-top: 0.83em; margin-bottom: 0.83em; font-size: 1.50em; font-weight: bold; }
h3 { margin-top: 1.00em; margin-bottom: 1.00em; font-size: 1.17em; font-weight: bold; }
h4 { margin-top: 1.33em; margin-bottom: 1.33em; font-size: 1.00em; font-weight: bold; }
h5 { margin-top: 1.67em; margin-bottom: 1.67em; font-size: 0.83em; font-weight: bold; }
h6 { margin-top: 2.33em; margin-bottom: 2.33em; font-size: 0.67em; font-weight: bold; }
</pre>
    <p>In the following CSS block, <var>x</var> is shorthand for the following selector: <code>:matches(article, aside, nav, section)</code></p>
<pre class="highlight"><span class="n">@namespace</span> <span class="nf">url</span><span class="p">(</span><span class="s">http://www.w3.org/1999/xhtml</span><span class="p">);</span>

<span class="nt">x h1 </span><span class="p">{</span> <span class="k">margin-top</span><span class="p">:</span> <span class="m">0</span>.83em; margin-bottom: 0.83em; font-size: 1.50em; }
x x h1 { margin-top: 1.00em; margin-bottom: 1.00em; font-size: 1.17em; }
x x x h1 { margin-top: 1.33em; margin-bottom: 1.33em; font-size: 1.00em; }
x x x x h1 { margin-top: 1.67em; margin-bottom: 1.67em; font-size: 0.83em; }
x x x x x h1 { margin-top: 2.33em; margin-bottom: 2.33em; font-size: 0.67em; }
</pre>
    <p class="note" role="note"> The shorthand is used to keep this block at least mildly readable. </p>
    <h4 class="heading settled" data-level="10.3.8" id="section-lists"><span class="secno">10.3.8. </span><span class="content">Lists</span><a class="self-link" href="rendering.html#section-lists"></a></h4>
<pre class="highlight"><span class="n">@namespace</span> <span class="nf">url</span><span class="p">(</span><span class="s">http://www.w3.org/1999/xhtml</span><span class="p">);</span>

<span class="nt">dir, dd, dl, dt, menu, ol, ul </span><span class="p">{</span> <span class="k">display</span><span class="p">:</span> block<span class="p">;</span> <span class="p">}</span>
<span class="nt">li </span><span class="p">{</span> <span class="k">display</span><span class="p">:</span> list-item<span class="p">;</span> <span class="p">}</span>

<span class="nt">dir, dl, menu, ol, ul </span><span class="p">{</span> <span class="k">margin-top</span><span class="p">:</span> <span class="m">1</span><span class="l">em</span><span class="p">;</span> <span class="k">margin-bottom</span><span class="p">:</span> <span class="m">1</span><span class="l">em</span><span class="p">;</span> <span class="p">}</span>

<span class="nt">:matches(dir, dl, menu, ol, ul) :matches(dir, dl, menu, ol, ul) </span><span class="p">{</span>
  <span class="k">margin-top</span><span class="p">:</span> <span class="m">0</span><span class="p">;</span> <span class="k">margin-bottom</span><span class="p">:</span> <span class="m">0</span><span class="p">;</span>
<span class="p">}</span>

<span class="nt">dd </span><span class="p">{</span> <span class="k">margin-left</span><span class="p">:</span> <span class="m">40</span><span class="l">px</span><span class="p">;</span> <span class="p">}</span> <span class="c">/* LTR-specific: use 'margin-right' for rtl elements */</span>
<span class="nt">dir, menu, ol, ul </span><span class="p">{</span> <span class="k">padding-left</span><span class="p">:</span> <span class="m">40</span><span class="l">px</span><span class="p">;</span> <span class="p">}</span> <span class="c">/* LTR-specific: use 'padding-right' for rtl elements */</span>

<span class="nt">ol </span><span class="p">{</span> <span class="k">list-style-type</span><span class="p">:</span> decimal<span class="p">;</span> <span class="p">}</span>

<span class="nt">dir, menu, ul </span><span class="p">{</span>
  <span class="k">list-style-type</span><span class="p">:</span> disc<span class="p">;</span>
<span class="p">}</span>
<span class="nt">:matches(dir, menu, ol, ul) :matches(dir, menu, ul) </span><span class="p">{</span>
  <span class="k">list-style-type</span><span class="p">:</span> circle<span class="p">;</span>
<span class="p">}</span>
<span class="nt">:matches(dir, menu, ol, ul) :matches(dir, menu, ol, ul) :matches(dir, menu, ul) </span><span class="p">{</span>
  <span class="k">list-style-type</span><span class="p">:</span> square<span class="p">;</span>
<span class="p">}</span>
</pre>
    <p>The following rules are also expected to apply, as <a data-link-type="dfn" href="rendering.html#presentational-hints" id="ref-for-presentational-hints-21">presentational
  hints</a>:</p>
<pre class="highlight"><span class="n">@namespace</span> <span class="nf">url</span><span class="p">(</span><span class="s">http://www.w3.org/1999/xhtml</span><span class="p">);</span>

<span class="nt">ol[type=1], li[type=1] </span><span class="p">{</span> <span class="k">list-style-type</span><span class="p">:</span> decimal<span class="p">;</span> <span class="p">}</span>
<span class="nt">ol[type=a], li[type=a] </span><span class="p">{</span> <span class="k">list-style-type</span><span class="p">:</span> lower-alpha<span class="p">;</span> <span class="p">}</span>
<span class="nt">ol[type=A], li[type=A] </span><span class="p">{</span> <span class="k">list-style-type</span><span class="p">:</span> upper-alpha<span class="p">;</span> <span class="p">}</span>
<span class="nt">ol[type=i], li[type=i] </span><span class="p">{</span> <span class="k">list-style-type</span><span class="p">:</span> lower-roman<span class="p">;</span> <span class="p">}</span>
<span class="nt">ol[type=I], li[type=I] </span><span class="p">{</span> <span class="k">list-style-type</span><span class="p">:</span> upper-roman<span class="p">;</span> <span class="p">}</span>
<span class="nt">ul[type=none i], li[type=none i] </span><span class="p">{</span> <span class="k">list-style-type</span><span class="p">:</span> none<span class="p">;</span> <span class="p">}</span>
<span class="nt">ul[type=disc i], li[type=disc i] </span><span class="p">{</span> <span class="k">list-style-type</span><span class="p">:</span> disc<span class="p">;</span> <span class="p">}</span>
<span class="nt">ul[type=circle i], li[type=circle i] </span><span class="p">{</span> <span class="k">list-style-type</span><span class="p">:</span> circle<span class="p">;</span> <span class="p">}</span>
<span class="nt">ul[type=square i], li[type=square i] </span><span class="p">{</span> <span class="k">list-style-type</span><span class="p">:</span> square<span class="p">;</span> <span class="p">}</span>
</pre>
    <p>In the above stylesheet, the attribute selectors for the <code>ol</code> and <code><a data-link-type="element" href="grouping-content.html#elementdef-li" id="ref-for-elementdef-li-34">li</a></code> elements are expected to be treated as <a data-link-type="dfn" href="infrastructure.html#case-sensitive" id="ref-for-case-sensitive-30">case-sensitive</a>.</p>
    <p>When rendering <code><a data-link-type="element" href="grouping-content.html#elementdef-li" id="ref-for-elementdef-li-35">li</a></code> elements, non-CSS user agents are expected to use the <a data-link-type="dfn" href="grouping-content.html#ordinal-value" id="ref-for-ordinal-value-8">ordinal value</a> of the <code><a data-link-type="element" href="grouping-content.html#elementdef-li" id="ref-for-elementdef-li-36">li</a></code> element to render the counter in the list item
  marker.</p>
    <p class="critical">This specification does not yet define the
  CSS-specific rules for rendering <code><a data-link-type="element" href="grouping-content.html#elementdef-li" id="ref-for-elementdef-li-37">li</a></code> elements, because CSS doesn’t yet provide
  sufficient hooks for this purpose. </p>
    <h4 class="heading settled" data-level="10.3.9" id="tables"><span class="secno">10.3.9. </span><span class="content">Tables</span><a class="self-link" href="rendering.html#tables"></a></h4>
<pre class="highlight"><span class="n">@namespace</span> <span class="nf">url</span><span class="p">(</span><span class="s">http://www.w3.org/1999/xhtml</span><span class="p">);</span>

<span class="nt">table </span><span class="p">{</span> <span class="k">display</span><span class="p">:</span> table<span class="p">;</span> <span class="p">}</span>
<span class="nt">caption </span><span class="p">{</span> <span class="k">display</span><span class="p">:</span> table-caption<span class="p">;</span> <span class="p">}</span>
<span class="nt">colgroup, colgroup[hidden] </span><span class="p">{</span> <span class="k">display</span><span class="p">:</span> table-column-group<span class="p">;</span> <span class="p">}</span>
<span class="nt">col, col[hidden] </span><span class="p">{</span> <span class="k">display</span><span class="p">:</span> table-column<span class="p">;</span> <span class="p">}</span>
<span class="nt">thead, thead[hidden] </span><span class="p">{</span> <span class="k">display</span><span class="p">:</span> table-header-group<span class="p">;</span> <span class="p">}</span>
<span class="nt">tbody, tbody[hidden] </span><span class="p">{</span> <span class="k">display</span><span class="p">:</span> table-row-group<span class="p">;</span> <span class="p">}</span>
<span class="nt">tfoot, tfoot[hidden] </span><span class="p">{</span> <span class="k">display</span><span class="p">:</span> table-footer-group<span class="p">;</span> <span class="p">}</span>
<span class="nt">tr, tr[hidden] </span><span class="p">{</span> <span class="k">display</span><span class="p">:</span> table-row<span class="p">;</span> <span class="p">}</span>
<span class="nt">td, th, td[hidden], th[hidden] </span><span class="p">{</span> <span class="k">display</span><span class="p">:</span> table-cell<span class="p">;</span> <span class="p">}</span>

<span class="nt">colgroup[hidden], col[hidden], thead[hidden], tbody[hidden],</span>
<span class="nt">tfoot[hidden], tr[hidden], td[hidden], th[hidden] </span><span class="p">{</span>
  <span class="k">visibility</span><span class="p">:</span> collapse<span class="p">;</span>
<span class="p">}</span>

<span class="nt">table </span><span class="p">{</span>
  <span class="k">box-sizing</span><span class="p">:</span> border-box<span class="p">;</span>
  <span class="k">border-spacing</span><span class="p">:</span> <span class="m">2</span><span class="l">px</span><span class="p">;</span>
  <span class="k">border-collapse</span><span class="p">:</span> separate<span class="p">;</span>
  <span class="k">text-indent</span><span class="p">:</span> initial<span class="p">;</span>
<span class="p">}</span>
<span class="nt">td, th </span><span class="p">{</span> <span class="k">padding</span><span class="p">:</span> <span class="m">1</span><span class="l">px</span><span class="p">;</span> <span class="p">}</span>
<span class="nt">th </span><span class="p">{</span> <span class="k">font-weight</span><span class="p">:</span> bold<span class="p">;</span> <span class="p">}</span>

<span class="nt">thead, tbody, tfoot, table &gt; tr </span><span class="p">{</span> <span class="k">vertical-align</span><span class="p">:</span> middle<span class="p">;</span> <span class="p">}</span>
<span class="nt">tr, td, th </span><span class="p">{</span> <span class="k">vertical-align</span><span class="p">:</span> inherit<span class="p">;</span> <span class="p">}</span>

<span class="nt">table, td, th </span><span class="p">{</span> <span class="k">border-color</span><span class="p">:</span> gray<span class="p">;</span> <span class="p">}</span>
<span class="nt">thead, tbody, tfoot, tr </span><span class="p">{</span> <span class="k">border-color</span><span class="p">:</span> inherit<span class="p">;</span> <span class="p">}</span>
<span class="nt">table[rules=none i], table[rules=groups i], table[rules=rows i],</span>
<span class="nt">table[rules=cols i], table[rules=all i], table[frame=void i],</span>
<span class="nt">table[frame=above i], table[frame=below i], table[frame=hsides i],</span>
<span class="nt">table[frame=lhs i], table[frame=rhs i], table[frame=vsides i],</span>
<span class="nt">table[frame=box i], table[frame=border i],</span>
<span class="nt">table[rules=none i] &gt; tr &gt; td, table[rules=none i] &gt; tr &gt; th,</span>
<span class="nt">table[rules=groups i] &gt; tr &gt; td, table[rules=groups i] &gt; tr &gt; th,</span>
<span class="nt">table[rules=rows i] &gt; tr &gt; td, table[rules=rows i] &gt; tr &gt; th,</span>
<span class="nt">table[rules=cols i] &gt; tr &gt; td, table[rules=cols i] &gt; tr &gt; th,</span>
<span class="nt">table[rules=all i] &gt; tr &gt; td, table[rules=all i] &gt; tr &gt; th,</span>
<span class="nt">table[rules=none i] &gt; thead &gt; tr &gt; td, table[rules=none i] &gt; thead &gt; tr &gt; th,</span>
<span class="nt">table[rules=groups i] &gt; thead &gt; tr &gt; td, table[rules=groups i] &gt; thead &gt; tr &gt; th,</span>
<span class="nt">table[rules=rows i] &gt; thead &gt; tr &gt; td, table[rules=rows i] &gt; thead &gt; tr &gt; th,</span>
<span class="nt">table[rules=cols i] &gt; thead &gt; tr &gt; td, table[rules=cols i] &gt; thead &gt; tr &gt; th,</span>
<span class="nt">table[rules=all i] &gt; thead &gt; tr &gt; td, table[rules=all i] &gt; thead &gt; tr &gt; th,</span>
<span class="nt">table[rules=none i] &gt; tbody &gt; tr &gt; td, table[rules=none i] &gt; tbody &gt; tr &gt; th,</span>
<span class="nt">table[rules=groups i] &gt; tbody &gt; tr &gt; td, table[rules=groups i] &gt; tbody &gt; tr &gt; th,</span>
<span class="nt">table[rules=rows i] &gt; tbody &gt; tr &gt; td, table[rules=rows i] &gt; tbody &gt; tr &gt; th,</span>
<span class="nt">table[rules=cols i] &gt; tbody &gt; tr &gt; td, table[rules=cols i] &gt; tbody &gt; tr &gt; th,</span>
<span class="nt">table[rules=all i] &gt; tbody &gt; tr &gt; td, table[rules=all i] &gt; tbody &gt; tr &gt; th,</span>
<span class="nt">table[rules=none i] &gt; tfoot &gt; tr &gt; td, table[rules=none i] &gt; tfoot &gt; tr &gt; th,</span>
<span class="nt">table[rules=groups i] &gt; tfoot &gt; tr &gt; td, table[rules=groups i] &gt; tfoot &gt; tr &gt; th,</span>
<span class="nt">table[rules=rows i] &gt; tfoot &gt; tr &gt; td, table[rules=rows i] &gt; tfoot &gt; tr &gt; th,</span>
<span class="nt">table[rules=cols i] &gt; tfoot &gt; tr &gt; td, table[rules=cols i] &gt; tfoot &gt; tr &gt; th,</span>
<span class="nt">table[rules=all i] &gt; tfoot &gt; tr &gt; td, table[rules=all i] &gt; tfoot &gt; tr &gt; th </span><span class="p">{</span>
  <span class="k">border-color</span><span class="p">:</span> black<span class="p">;</span>
<span class="p">}</span>
</pre>
    <p>The following rules are also expected to apply, as <a data-link-type="dfn" href="rendering.html#presentational-hints" id="ref-for-presentational-hints-22">presentational hints</a>:</p>
<pre class="highlight"><span class="n">@namespace</span> <span class="nf">url</span><span class="p">(</span><span class="s">http://www.w3.org/1999/xhtml</span><span class="p">);</span>

<span class="nt">table[align=left i] </span><span class="p">{</span> <span class="k">float</span><span class="p">:</span> left<span class="p">;</span> <span class="p">}</span>
<span class="nt">table[align=right i] </span><span class="p">{</span> <span class="k">float</span><span class="p">:</span> right<span class="p">;</span> <span class="p">}</span>
<span class="nt">table[align=center i] </span><span class="p">{</span> <span class="k">margin-left</span><span class="p">:</span> auto<span class="p">;</span> <span class="k">margin-right</span><span class="p">:</span> auto<span class="p">;</span> <span class="p">}</span>
<span class="nt">thead[align=absmiddle i], tbody[align=absmiddle i], tfoot[align=absmiddle i],</span>
<span class="nt">tr[align=absmiddle i], td[align=absmiddle i], th[align=absmiddle i] </span><span class="p">{</span>
  <span class="k">text-align</span><span class="p">:</span> center<span class="p">;</span>
<span class="p">}</span>

<span class="nt">caption[align=bottom i] </span><span class="p">{</span> <span class="k">caption-side</span><span class="p">:</span> bottom<span class="p">;</span> <span class="p">}</span>
<span class="nt">p[align=left i], h1[align=left i], h2[align=left i], h3[align=left i],</span>
<span class="nt">h4[align=left i], h5[align=left i], h6[align=left i] </span><span class="p">{</span>
  <span class="k">text-align</span><span class="p">:</span> left<span class="p">;</span>
<span class="p">}</span>
<span class="nt">p[align=right i], h1[align=right i], h2[align=right i], h3[align=right i],</span>
<span class="nt">h4[align=right i], h5[align=right i], h6[align=right i] </span><span class="p">{</span>
  <span class="k">text-align</span><span class="p">:</span> right<span class="p">;</span>
<span class="p">}</span>
<span class="nt">p[align=center i], h1[align=center i], h2[align=center i], h3[align=center i],</span>
<span class="nt">h4[align=center i], h5[align=center i], h6[align=center i] </span><span class="p">{</span>
  <span class="k">text-align</span><span class="p">:</span> center<span class="p">;</span>
<span class="p">}</span>
<span class="nt">p[align=justify i], h1[align=justify i], h2[align=justify i], h3[align=justify i],</span>
<span class="nt">h4[align=justify i], h5[align=justify i], h6[align=justify i] </span><span class="p">{</span>
  <span class="k">text-align</span><span class="p">:</span> justify<span class="p">;</span>
<span class="p">}</span>
<span class="nt">thead[valign=top i], tbody[valign=top i], tfoot[valign=top i],</span>
<span class="nt">tr[valign=top i], td[valign=top i], th[valign=top i] </span><span class="p">{</span>
  <span class="k">vertical-align</span><span class="p">:</span> top<span class="p">;</span>
<span class="p">}</span>
<span class="nt">thead[valign=middle i], tbody[valign=middle i], tfoot[valign=middle i],</span>
<span class="nt">tr[valign=middle i], td[valign=middle i], th[valign=middle i] </span><span class="p">{</span>
  <span class="k">vertical-align</span><span class="p">:</span> middle<span class="p">;</span>
<span class="p">}</span>
<span class="nt">thead[valign=bottom i], tbody[valign=bottom i], tfoot[valign=bottom i],</span>
<span class="nt">tr[valign=bottom i], td[valign=bottom i], th[valign=bottom i] </span><span class="p">{</span>
  <span class="k">vertical-align</span><span class="p">:</span> bottom<span class="p">;</span>
<span class="p">}</span>
<span class="nt">thead[valign=baseline i], tbody[valign=baseline i], tfoot[valign=baseline i],</span>
<span class="nt">tr[valign=baseline i], td[valign=baseline i], th[valign=baseline i] </span><span class="p">{</span>
  <span class="k">vertical-align</span><span class="p">:</span> baseline<span class="p">;</span>
<span class="p">}</span>

<span class="nt">td[nowrap], th[nowrap] </span><span class="p">{</span> <span class="k">white-space</span><span class="p">:</span> nowrap<span class="p">;</span> <span class="p">}</span>

<span class="nt">table[rules=none i], table[rules=groups i], table[rules=rows i],</span>
<span class="nt">table[rules=cols i], table[rules=all i] </span><span class="p">{</span>
<span class="k">border-style</span><span class="p">:</span> hidden<span class="p">;</span>
  <span class="k">border-collapse</span><span class="p">:</span> collapse<span class="p">;</span>
<span class="p">}</span>
<span class="nt">table[border] </span><span class="p">{</span> <span class="k">border-style</span><span class="p">:</span> outset<span class="p">;</span> <span class="p">}</span> <span class="c">/* only if border is not equivalent to zero */</span>
<span class="nt">table[frame=void i] </span><span class="p">{</span> <span class="k">border-style</span><span class="p">:</span> hidden<span class="p">;</span> <span class="p">}</span>
<span class="nt">table[frame=above i] </span><span class="p">{</span> <span class="k">border-style</span><span class="p">:</span> outset hidden hidden hidden<span class="p">;</span> <span class="p">}</span>
<span class="nt">table[frame=below i] </span><span class="p">{</span> <span class="k">border-style</span><span class="p">:</span> hidden hidden outset hidden<span class="p">;</span> <span class="p">}</span>
<span class="nt">table[frame=hsides i] </span><span class="p">{</span> <span class="k">border-style</span><span class="p">:</span> outset hidden outset hidden<span class="p">;</span> <span class="p">}</span>
<span class="nt">table[frame=lhs i] </span><span class="p">{</span> <span class="k">border-style</span><span class="p">:</span> hidden hidden hidden outset<span class="p">;</span> <span class="p">}</span>
<span class="nt">table[frame=rhs i] </span><span class="p">{</span> <span class="k">border-style</span><span class="p">:</span> hidden outset hidden hidden<span class="p">;</span> <span class="p">}</span>
<span class="nt">table[frame=vsides i] </span><span class="p">{</span> <span class="k">border-style</span><span class="p">:</span> hidden outset<span class="p">;</span> <span class="p">}</span>
<span class="nt">table[frame=box i], table[frame=border i] </span><span class="p">{</span> <span class="k">border-style</span><span class="p">:</span> outset<span class="p">;</span> <span class="p">}</span>

<span class="nt">table[border] &gt; tr &gt; td, table[border] &gt; tr &gt; th,</span>
<span class="nt">table[border] &gt; thead &gt; tr &gt; td, table[border] &gt; thead &gt; tr &gt; th,</span>
<span class="nt">table[border] &gt; tbody &gt; tr &gt; td, table[border] &gt; tbody &gt; tr &gt; th,</span>
<span class="nt">table[border] &gt; tfoot &gt; tr &gt; td, table[border] &gt; tfoot &gt; tr &gt; th </span><span class="p">{</span>
<span class="c">/* only if border is not equivalent to zero */</span>
  <span class="k">border-width</span><span class="p">:</span> <span class="m">1</span><span class="l">px</span><span class="p">;</span>
  <span class="k">border-style</span><span class="p">:</span> inset<span class="p">;</span>
<span class="p">}</span>
<span class="nt">table[rules=none i] &gt; tr &gt; td, table[rules=none i] &gt; tr &gt; th,</span>
<span class="nt">table[rules=none i] &gt; thead &gt; tr &gt; td, table[rules=none i] &gt; thead &gt; tr &gt; th,</span>
<span class="nt">table[rules=none i] &gt; tbody &gt; tr &gt; td, table[rules=none i] &gt; tbody &gt; tr &gt; th,</span>
<span class="nt">table[rules=none i] &gt; tfoot &gt; tr &gt; td, table[rules=none i] &gt; tfoot &gt; tr &gt; th,</span>
<span class="nt">table[rules=groups i] &gt; tr &gt; td, table[rules=groups i] &gt; tr &gt; th,</span>
<span class="nt">table[rules=groups i] &gt; thead &gt; tr &gt; td, table[rules=groups i] &gt; thead &gt; tr &gt; th,</span>
<span class="nt">table[rules=groups i] &gt; tbody &gt; tr &gt; td, table[rules=groups i] &gt; tbody &gt; tr &gt; th,</span>
<span class="nt">table[rules=groups i] &gt; tfoot &gt; tr &gt; td, table[rules=groups i] &gt; tfoot &gt; tr &gt; th,</span>
<span class="nt">table[rules=rows i] &gt; tr &gt; td, table[rules=rows i] &gt; tr &gt; th,</span>
<span class="nt">table[rules=rows i] &gt; thead &gt; tr &gt; td, table[rules=rows i] &gt; thead &gt; tr &gt; th,</span>
<span class="nt">table[rules=rows i] &gt; tbody &gt; tr &gt; td, table[rules=rows i] &gt; tbody &gt; tr &gt; th,</span>
<span class="nt">table[rules=rows i] &gt; tfoot &gt; tr &gt; td, table[rules=rows i] &gt; tfoot &gt; tr &gt; th </span><span class="p">{</span>
  <span class="k">border-width</span><span class="p">:</span> <span class="m">1</span><span class="l">px</span><span class="p">;</span>
  <span class="k">border-style</span><span class="p">:</span> none<span class="p">;</span>
<span class="p">}</span>
<span class="nt">table[rules=cols i] &gt; tr &gt; td, table[rules=cols i] &gt; tr &gt; th,</span>
<span class="nt">table[rules=cols i] &gt; thead &gt; tr &gt; td, table[rules=cols i] &gt; thead &gt; tr &gt; th,</span>
<span class="nt">table[rules=cols i] &gt; tbody &gt; tr &gt; td, table[rules=cols i] &gt; tbody &gt; tr &gt; th,</span>
<span class="nt">table[rules=cols i] &gt; tfoot &gt; tr &gt; td, table[rules=cols i] &gt; tfoot &gt; tr &gt; th </span><span class="p">{</span>
  <span class="k">border-width</span><span class="p">:</span> <span class="m">1</span><span class="l">px</span><span class="p">;</span>
  <span class="k">border-style</span><span class="p">:</span> none solid<span class="p">;</span>
<span class="p">}</span>
<span class="nt">table[rules=all i] &gt; tr &gt; td, table[rules=all i] &gt; tr &gt; th,</span>
<span class="nt">table[rules=all i] &gt; thead &gt; tr &gt; td, table[rules=all i] &gt; thead &gt; tr &gt; th,</span>
<span class="nt">table[rules=all i] &gt; tbody &gt; tr &gt; td, table[rules=all i] &gt; tbody &gt; tr &gt; th,</span>
<span class="nt">table[rules=all i] &gt; tfoot &gt; tr &gt; td, table[rules=all i] &gt; tfoot &gt; tr &gt; th </span><span class="p">{</span>
  <span class="k">border-width</span><span class="p">:</span> <span class="m">1</span><span class="l">px</span><span class="p">;</span>
  <span class="k">border-style</span><span class="p">:</span> solid<span class="p">;</span>
<span class="p">}</span>

<span class="nt">table[rules=groups i] &gt; colgroup </span><span class="p">{</span>
  <span class="k">border-left-width</span><span class="p">:</span> <span class="m">1</span><span class="l">px</span><span class="p">;</span>
  <span class="k">border-left-style</span><span class="p">:</span> solid<span class="p">;</span>
  <span class="k">border-right-width</span><span class="p">:</span> <span class="m">1</span><span class="l">px</span><span class="p">;</span>
  <span class="k">border-right-style</span><span class="p">:</span> solid<span class="p">;</span>
<span class="p">}</span>
<span class="nt">table[rules=groups i] &gt; thead,</span>
<span class="nt">table[rules=groups i] &gt; tbody,</span>
<span class="nt">table[rules=groups i] &gt; tfoot </span><span class="p">{</span>
  <span class="k">border-top-width</span><span class="p">:</span> <span class="m">1</span><span class="l">px</span><span class="p">;</span>
  <span class="k">border-top-style</span><span class="p">:</span> solid<span class="p">;</span>
  <span class="k">border-bottom-width</span><span class="p">:</span> <span class="m">1</span><span class="l">px</span><span class="p">;</span>
  <span class="k">border-bottom-style</span><span class="p">:</span> solid<span class="p">;</span>
<span class="p">}</span>

<span class="nt">table[rules=rows i] &gt; tr, table[rules=rows i] &gt; thead &gt; tr,</span>
<span class="nt">table[rules=rows i] &gt; tbody &gt; tr, table[rules=rows i] &gt; tfoot &gt; tr </span><span class="p">{</span>
  <span class="k">border-top-width</span><span class="p">:</span> <span class="m">1</span><span class="l">px</span><span class="p">;</span>
  <span class="k">border-top-style</span><span class="p">:</span> solid<span class="p">;</span>
  <span class="k">border-bottom-width</span><span class="p">:</span> <span class="m">1</span><span class="l">px</span><span class="p">;</span>
  <span class="k">border-bottom-style</span><span class="p">:</span> solid<span class="p">;</span>
<span class="p">}</span>
</pre>
    <p>In <a data-link-type="dfn" href="infrastructure.html#quirks-mode" id="ref-for-quirks-mode-11">quirks mode</a>, the following rules are also expected to apply:</p>
<pre class="highlight"><span class="n">@namespace</span> <span class="nf">url</span><span class="p">(</span><span class="s">http://www.w3.org/1999/xhtml</span><span class="p">);</span>

<span class="nt">table </span><span class="p">{</span>
  <span class="k">font-weight</span><span class="p">:</span> initial<span class="p">;</span>
  <span class="k">font-style</span><span class="p">:</span> initial<span class="p">;</span>
  <span class="k">font-variant</span><span class="p">:</span> initial<span class="p">;</span>
  <span class="k">font-size</span><span class="p">:</span> initial<span class="p">;</span>
  <span class="k">line-height</span><span class="p">:</span> initial<span class="p">;</span>
  <span class="k">white-space</span><span class="p">:</span> initial<span class="p">;</span>
  <span class="k">text-align</span><span class="p">:</span> initial<span class="p">;</span>
<span class="p">}</span>
</pre>
    <hr>
    <p>For the purposes of the CSS table model, the <code><a data-link-type="element" href="tabular-data.html#elementdef-col" id="ref-for-elementdef-col-20">col</a></code> element is expected to be treated
  as if it was present as many times as its <code>span</code> attribute <a data-link-type="dfn" href="infrastructure.html#parse-that-attributes-value" id="ref-for-parse-that-attributes-value-21">specifies</a>.</p>
    <p>For the purposes of the CSS table model, the <code><a data-link-type="element" href="tabular-data.html#elementdef-colgroup" id="ref-for-elementdef-colgroup-41">colgroup</a></code> element, if it contains no <code><a data-link-type="element" href="tabular-data.html#elementdef-col" id="ref-for-elementdef-col-21">col</a></code> element, is expected to be treated as if it had as many such children as its <code>span</code> attribute <a data-link-type="dfn" href="infrastructure.html#parse-that-attributes-value" id="ref-for-parse-that-attributes-value-22">specifies</a>.</p>
    <p>For the purposes of the CSS table model, the <code>colspan</code> and <code>rowspan</code> attributes on <code><a data-link-type="element" href="tabular-data.html#elementdef-td" id="ref-for-elementdef-td-38">td</a></code> and <code><a data-link-type="element" href="tabular-data.html#elementdef-th" id="ref-for-elementdef-th-48">th</a></code> elements are expected to <a data-link-type="dfn" href="infrastructure.html#parse-that-attributes-value" id="ref-for-parse-that-attributes-value-23">provide</a> the <i>special knowledge</i> regarding cells spanning rows and columns.</p>
    <p>In <a data-link-type="dfn" href="infrastructure.html#html-document" id="ref-for-html-document-36">HTML documents</a>, the following rules are also expected to apply:</p>
<pre class="highlight"><span class="n">@namespace</span> <span class="nf">url</span><span class="p">(</span><span class="s">http://www.w3.org/1999/xhtml</span><span class="p">);</span>

<span class="nt">:matches(table, thead, tbody, tfoot, tr) &gt; form </span><span class="p">{</span>  <span class="k">display</span><span class="p">:</span> none !important; }
</pre>
    <hr>
    <p>The <code><a data-link-type="element" href="tabular-data.html#elementdef-table" id="ref-for-elementdef-table-103">table</a></code> element’s <code>cellspacing</code> attribute <a data-link-type="dfn" href="rendering.html#maps-to-the-pixel-length-property" id="ref-for-maps-to-the-pixel-length-property-2">maps to the pixel length property</a> <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/CSS21/tables.html#propdef-border-spacing">border-spacing</a> on the element.</p>
    <p>The <code><a data-link-type="element" href="tabular-data.html#elementdef-table" id="ref-for-elementdef-table-104">table</a></code> element’s <code>cellpadding</code> attribute <a data-link-type="dfn" href="rendering.html#maps-to-the-pixel-length-property" id="ref-for-maps-to-the-pixel-length-property-3">maps to the pixel length
  properties</a> <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/CSS21/box.html#propdef-padding-top">padding-top</a>, <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/CSS21/box.html#propdef-padding-right">padding-right</a>, <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/CSS21/box.html#propdef-padding-bottom">padding-bottom</a>, and <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/CSS21/box.html#propdef-padding-left">padding-left</a> of any <code>td</code> and <code><a data-link-type="element" href="tabular-data.html#elementdef-th" id="ref-for-elementdef-th-49">th</a></code> elements that have corresponding <a data-link-type="dfn" href="tabular-data.html#cell" id="ref-for-cell-11">cells</a> in the <a data-link-type="dfn" href="tabular-data.html#table" id="ref-for-table-9">table</a> corresponding to
  the <code><a data-link-type="element" href="tabular-data.html#elementdef-table" id="ref-for-elementdef-table-105">table</a></code> element.</p>
    <p>The <code><a data-link-type="element" href="tabular-data.html#elementdef-table" id="ref-for-elementdef-table-106">table</a></code> element’s <code>hspace</code> attribute <a data-link-type="dfn" href="rendering.html#as-hints-for-the-rendering" id="ref-for-as-hints-for-the-rendering-2">maps to the dimension properties</a> <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/CSS21/box.html#propdef-margin-left">margin-left</a> and <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/CSS21/box.html#propdef-margin-right">margin-right</a> on the <code><a data-link-type="element" href="tabular-data.html#elementdef-table" id="ref-for-elementdef-table-107">table</a></code> element.</p>
    <p>The <code><a data-link-type="element" href="tabular-data.html#elementdef-table" id="ref-for-elementdef-table-108">table</a></code> element’s <code>vspace</code> attribute <a data-link-type="dfn" href="rendering.html#as-hints-for-the-rendering" id="ref-for-as-hints-for-the-rendering-3">maps to the dimension properties</a> <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/CSS21/box.html#propdef-margin-top">margin-top</a> and <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/CSS21/box.html#propdef-margin-bottom">margin-bottom</a> on the <code><a data-link-type="element" href="tabular-data.html#elementdef-table" id="ref-for-elementdef-table-109">table</a></code> element.</p>
    <p>The <code><a data-link-type="element" href="tabular-data.html#elementdef-table" id="ref-for-elementdef-table-110">table</a></code> element’s <code>height</code> attribute <a data-link-type="dfn" href="rendering.html#map-to-the-dimension-property-ignoring-zero" id="ref-for-map-to-the-dimension-property-ignoring-zero-1">maps to the dimension property (ignoring zero)</a> <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/CSS21/visudet.html#propdef-height">height</a> on the <code>table</code> element.</p>
    <p>The <code><a data-link-type="element" href="tabular-data.html#elementdef-table" id="ref-for-elementdef-table-111">table</a></code> element’s <code>width</code> attribute <a data-link-type="dfn" href="rendering.html#map-to-the-dimension-property-ignoring-zero" id="ref-for-map-to-the-dimension-property-ignoring-zero-2">maps to the dimension property (ignoring zero)</a> <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/CSS21/visudet.html#propdef-width">width</a> on the <code>table</code> element.</p>
    <p>The <code><a data-link-type="element" href="tabular-data.html#elementdef-col" id="ref-for-elementdef-col-22">col</a></code> element’s <code>width</code> attribute <a data-link-type="dfn" href="rendering.html#map-to-the-dimension-property-ignoring-zero" id="ref-for-map-to-the-dimension-property-ignoring-zero-3">maps
  to the dimension property (ignoring zero)</a> <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/CSS21/visudet.html#propdef-width">width</a> on the <code><a data-link-type="element" href="tabular-data.html#elementdef-col" id="ref-for-elementdef-col-23">col</a></code> element.</p>
    <p>The <code><a data-link-type="element" href="tabular-data.html#elementdef-tr" id="ref-for-elementdef-tr-83">tr</a></code> element’s <code>height</code> attribute <a data-link-type="dfn" href="rendering.html#map-to-the-dimension-property-ignoring-zero" id="ref-for-map-to-the-dimension-property-ignoring-zero-4">maps
  to the dimension property (ignoring zero)</a> <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/CSS21/visudet.html#propdef-height">height</a> on the <code><a data-link-type="element" href="tabular-data.html#elementdef-tr" id="ref-for-elementdef-tr-84">tr</a></code> element.</p>
    <p>The <code>td</code> and <code><a data-link-type="element" href="tabular-data.html#elementdef-th" id="ref-for-elementdef-th-50">th</a></code> elements' <code>height</code> attributes <a data-link-type="dfn" href="rendering.html#map-to-the-dimension-property-ignoring-zero" id="ref-for-map-to-the-dimension-property-ignoring-zero-5">map to the dimension
  property (ignoring zero)</a> <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/CSS21/visudet.html#propdef-height">height</a> on the element.</p>
    <p>The <code>td</code> and <code><a data-link-type="element" href="tabular-data.html#elementdef-th" id="ref-for-elementdef-th-51">th</a></code> elements' <code>width</code> attributes <a data-link-type="dfn" href="rendering.html#map-to-the-dimension-property-ignoring-zero" id="ref-for-map-to-the-dimension-property-ignoring-zero-6">map to the dimension
  property (ignoring zero)</a> <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/CSS21/visudet.html#propdef-width">width</a> on the element.</p>
    <hr>
    <p>The <code><a data-link-type="element" href="tabular-data.html#elementdef-caption" id="ref-for-elementdef-caption-39">caption</a></code> element unless specified otherwise below, and the <code><a data-link-type="element" href="tabular-data.html#elementdef-thead" id="ref-for-elementdef-thead-54">thead</a></code>, <code><a data-link-type="element" href="tabular-data.html#elementdef-tbody" id="ref-for-elementdef-tbody-65">tbody</a></code>, <code><a data-link-type="element" href="tabular-data.html#elementdef-tfoot" id="ref-for-elementdef-tfoot-56">tfoot</a></code>, <code><a data-link-type="element" href="tabular-data.html#elementdef-tr" id="ref-for-elementdef-tr-85">tr</a></code>, <code><a data-link-type="element" href="tabular-data.html#elementdef-td" id="ref-for-elementdef-td-39">td</a></code>, and <code>th</code> elements when they have an <code>align</code> attribute whose value is an <a data-link-type="dfn" href="infrastructure.html#ascii-case-insensitive" id="ref-for-ascii-case-insensitive-84">ASCII
  case-insensitive</a> match for either the string "<code>center</code>" or the string
  "<code>middle</code>", are expected to center text within themselves, as if they had
  their <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/css-text-3/#text-align">text-align</a> property set to <span class="css">center</span> in a <a data-link-type="dfn" href="rendering.html#presentational-hints" id="ref-for-presentational-hints-23">presentational hint</a>, and to <a data-link-type="dfn" href="rendering.html#align-descendants" id="ref-for-align-descendants-6">align descendants</a> to the center.</p>
    <p>The <code><a data-link-type="element" href="tabular-data.html#elementdef-caption" id="ref-for-elementdef-caption-40">caption</a></code>, <code><a data-link-type="element" href="tabular-data.html#elementdef-thead" id="ref-for-elementdef-thead-55">thead</a></code>, <code><a data-link-type="element" href="tabular-data.html#elementdef-tbody" id="ref-for-elementdef-tbody-66">tbody</a></code>, <code><a data-link-type="element" href="tabular-data.html#elementdef-tfoot" id="ref-for-elementdef-tfoot-57">tfoot</a></code>, <code><a data-link-type="element" href="tabular-data.html#elementdef-tr" id="ref-for-elementdef-tr-86">tr</a></code>, <code><a data-link-type="element" href="tabular-data.html#elementdef-td" id="ref-for-elementdef-td-40">td</a></code>, and <code><a data-link-type="element" href="tabular-data.html#elementdef-th" id="ref-for-elementdef-th-52">th</a></code> elements, when they have an <code>align</code> attribute whose value is an <a data-link-type="dfn" href="infrastructure.html#ascii-case-insensitive" id="ref-for-ascii-case-insensitive-85">ASCII case-insensitive</a> match for
  the string "<code>left</code>", are expected to left-align text within themselves, as if
  they had their <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/css-text-3/#text-align">text-align</a> property set to <span class="css">left</span> in a <a data-link-type="dfn" href="rendering.html#presentational-hints" id="ref-for-presentational-hints-24">presentational hint</a>, and to <a data-link-type="dfn" href="rendering.html#align-descendants" id="ref-for-align-descendants-7">align descendants</a> to the left.</p>
    <p>The <code><a data-link-type="element" href="tabular-data.html#elementdef-caption" id="ref-for-elementdef-caption-41">caption</a></code>, <code><a data-link-type="element" href="tabular-data.html#elementdef-thead" id="ref-for-elementdef-thead-56">thead</a></code>, <code><a data-link-type="element" href="tabular-data.html#elementdef-tbody" id="ref-for-elementdef-tbody-67">tbody</a></code>, <code><a data-link-type="element" href="tabular-data.html#elementdef-tfoot" id="ref-for-elementdef-tfoot-58">tfoot</a></code>, <code><a data-link-type="element" href="tabular-data.html#elementdef-tr" id="ref-for-elementdef-tr-87">tr</a></code>, <code><a data-link-type="element" href="tabular-data.html#elementdef-td" id="ref-for-elementdef-td-41">td</a></code>, and <code><a data-link-type="element" href="tabular-data.html#elementdef-th" id="ref-for-elementdef-th-53">th</a></code> elements, when they have an <code>align</code> attribute whose value is an <a data-link-type="dfn" href="infrastructure.html#ascii-case-insensitive" id="ref-for-ascii-case-insensitive-86">ASCII case-insensitive</a> match for
  the string "<code>right</code>", are expected to right-align text within themselves, as
  if they had their <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/css-text-3/#text-align">text-align</a> property set to <span class="css">right</span> in a <a data-link-type="dfn" href="rendering.html#presentational-hints" id="ref-for-presentational-hints-25">presentational hint</a>, and to <a data-link-type="dfn" href="rendering.html#align-descendants" id="ref-for-align-descendants-8">align descendants</a> to the right.</p>
    <p>The <code><a data-link-type="element" href="tabular-data.html#elementdef-caption" id="ref-for-elementdef-caption-42">caption</a></code>, <code><a data-link-type="element" href="tabular-data.html#elementdef-thead" id="ref-for-elementdef-thead-57">thead</a></code>, <code><a data-link-type="element" href="tabular-data.html#elementdef-tbody" id="ref-for-elementdef-tbody-68">tbody</a></code>, <code><a data-link-type="element" href="tabular-data.html#elementdef-tfoot" id="ref-for-elementdef-tfoot-59">tfoot</a></code>, <code><a data-link-type="element" href="tabular-data.html#elementdef-tr" id="ref-for-elementdef-tr-88">tr</a></code>, <code><a data-link-type="element" href="tabular-data.html#elementdef-td" id="ref-for-elementdef-td-42">td</a></code>, and <code><a data-link-type="element" href="tabular-data.html#elementdef-th" id="ref-for-elementdef-th-54">th</a></code> elements, when they have an <code>align</code> attribute whose value is an <a data-link-type="dfn" href="infrastructure.html#ascii-case-insensitive" id="ref-for-ascii-case-insensitive-87">ASCII case-insensitive</a> match for
  the string "<code>justify</code>", are expected to full-justify text within themselves,
  as if they had their <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/css-text-3/#text-align">text-align</a> property set to <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-text-3/#valdef-text-align-justify">justify</a> in a <a data-link-type="dfn" href="rendering.html#presentational-hints" id="ref-for-presentational-hints-26">presentational hint</a>, and to <a data-link-type="dfn" href="rendering.html#align-descendants" id="ref-for-align-descendants-9">align descendants</a> to the left.</p>
    <p>User agents are expected to have a rule in their user agent stylesheet that matches <code><a data-link-type="element" href="tabular-data.html#elementdef-th" id="ref-for-elementdef-th-55">th</a></code> elements that have a parent node whose computed value for the <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/css-text-3/#text-align">text-align</a> property is its initial value, whose declaration block consists of just a single declaration that
  sets the <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/css-text-3/#text-align">text-align</a> property to the value <span class="css">center</span>.</p>
    <hr>
    <p>When a <code><a data-link-type="element" href="tabular-data.html#elementdef-table" id="ref-for-elementdef-table-112">table</a></code>, <code><a data-link-type="element" href="tabular-data.html#elementdef-thead" id="ref-for-elementdef-thead-58">thead</a></code>, <code><a data-link-type="element" href="tabular-data.html#elementdef-tbody" id="ref-for-elementdef-tbody-69">tbody</a></code>, <code><a data-link-type="element" href="tabular-data.html#elementdef-tfoot" id="ref-for-elementdef-tfoot-60">tfoot</a></code>, <code><a data-link-type="element" href="tabular-data.html#elementdef-tr" id="ref-for-elementdef-tr-89">tr</a></code>, <code><a data-link-type="element" href="tabular-data.html#elementdef-td" id="ref-for-elementdef-td-43">td</a></code>, or <code><a data-link-type="element" href="tabular-data.html#elementdef-th" id="ref-for-elementdef-th-56">th</a></code> element has a <code><a data-link-type="element-sub" href="obsolete.html#element-attrdef-body-background" id="ref-for-element-attrdef-body-background-2">background</a></code> attribute set to a non-empty value, the new value is
  expected to be <a data-link-type="dfn" href="infrastructure.html#reparsed" id="ref-for-reparsed-50">parsed</a> relative to the element’s <a data-link-type="dfn" href="https://www.w3.org/TR/dom/#concept-node-document">node document</a>, and if this is
  successful, the user agent is expected to treat the attribute as a <a data-link-type="dfn" href="rendering.html#presentational-hints" id="ref-for-presentational-hints-27">presentational hint</a> setting the element’s <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/css3-background/#background-image">background-image</a> property to the <a data-link-type="dfn" href="infrastructure.html#resulting-url-string" id="ref-for-resulting-url-string-23">resulting URL string</a>.</p>
    <p>When a <code><a data-link-type="element" href="tabular-data.html#elementdef-table" id="ref-for-elementdef-table-113">table</a></code>, <code><a data-link-type="element" href="tabular-data.html#elementdef-thead" id="ref-for-elementdef-thead-59">thead</a></code>, <code><a data-link-type="element" href="tabular-data.html#elementdef-tbody" id="ref-for-elementdef-tbody-70">tbody</a></code>, <code><a data-link-type="element" href="tabular-data.html#elementdef-tfoot" id="ref-for-elementdef-tfoot-61">tfoot</a></code>, <code><a data-link-type="element" href="tabular-data.html#elementdef-tr" id="ref-for-elementdef-tr-90">tr</a></code>, <code><a data-link-type="element" href="tabular-data.html#elementdef-td" id="ref-for-elementdef-td-44">td</a></code>, or <code><a data-link-type="element" href="tabular-data.html#elementdef-th" id="ref-for-elementdef-th-57">th</a></code> element has a <code>bgcolor</code> attribute set, the new value is expected to be parsed using the <a data-link-type="dfn" href="infrastructure.html#rules-for-parsing-a-legacy-color-value" id="ref-for-rules-for-parsing-a-legacy-color-value-7">rules for parsing a legacy
  color value</a>, and if that does not return an error, the user agent is expected to treat the
  attribute as a <a data-link-type="dfn" href="rendering.html#presentational-hints" id="ref-for-presentational-hints-28">presentational hint</a> setting the element’s <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/css3-background/#background-color">background-color</a> property to the resulting color.</p>
    <p>When a <code><a data-link-type="element" href="tabular-data.html#elementdef-table" id="ref-for-elementdef-table-114">table</a></code> element has a <code>bordercolor</code> attribute, its value is expected to be parsed using the <a data-link-type="dfn" href="infrastructure.html#rules-for-parsing-a-legacy-color-value" id="ref-for-rules-for-parsing-a-legacy-color-value-8">rules for parsing a legacy color
  value</a>, and if that does not return an error, the user agent is expected to treat the
  attribute as a <a data-link-type="dfn" href="rendering.html#presentational-hints" id="ref-for-presentational-hints-29">presentational hint</a> setting the element’s <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/css3-background/#border-top-color">border-top-color</a>, <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/css3-background/#border-right-color">border-right-color</a>, <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/css3-background/#border-bottom-color">border-bottom-color</a>, and <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/css3-background/#border-left-color">border-left-color</a> properties to the resulting color.</p>
    <hr>
    <p>The <code><a data-link-type="element" href="tabular-data.html#elementdef-table" id="ref-for-elementdef-table-115">table</a></code> element’s <code>border</code> attribute <a data-link-type="dfn" href="rendering.html#maps-to-the-pixel-length-property" id="ref-for-maps-to-the-pixel-length-property-4">maps to the pixel length properties</a> <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/css3-background/#border-top-width">border-top-width</a>, <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/css3-background/#border-right-width">border-right-width</a>, <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/css3-background/#border-bottom-width">border-bottom-width</a>, <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/css3-background/#border-left-width">border-left-width</a> on the
  element. If the attribute is present but parsing the attribute’s value using the <a data-link-type="dfn" href="infrastructure.html#parse-that-attributes-value" id="ref-for-parse-that-attributes-value-24">rules for
  parsing non-negative integers</a> generates an error, a default value of 1px is expected to be
  used for that property instead.</p>
    <p>Rules marked "<dfn data-dfn-type="dfn" data-noexport="" id="only-if-border-is-not-equivalent-to-zero">only if border is not equivalent to zero<a class="self-link" href="rendering.html#only-if-border-is-not-equivalent-to-zero"></a></dfn>"
  in the CSS block above is expected to only be applied if the <code>border</code> attribute mentioned in the selectors for the rule is not
  only present but, when parsed using the <a data-link-type="dfn" href="infrastructure.html#parse-that-attributes-value" id="ref-for-parse-that-attributes-value-25">rules for parsing non-negative integers</a>, is
  also found to have a value other than zero or to generate an error.</p>
    <hr>
    <p>In <a data-link-type="dfn" href="infrastructure.html#quirks-mode" id="ref-for-quirks-mode-12">quirks mode</a>, a <code><a data-link-type="element" href="tabular-data.html#elementdef-td" id="ref-for-elementdef-td-45">td</a></code> element or a <code><a data-link-type="element" href="tabular-data.html#elementdef-th" id="ref-for-elementdef-th-58">th</a></code> element that has a <code>nowrap</code> attribute but also has a <code>width</code> attribute whose value, when parsed using the <a data-link-type="dfn" href="infrastructure.html#rules-for-parsing-non-zero-dimension-values" id="ref-for-rules-for-parsing-non-zero-dimension-values-2">rules for
  parsing non-zero dimension values</a>, is found to be a length (not an error or a number
  classified as a percentage), is expected to have a <a data-link-type="dfn" href="rendering.html#presentational-hints" id="ref-for-presentational-hints-30">presentational hint</a> setting the element’s <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/css-text-3/#white-space">white-space</a> property to <span class="css">normal</span>,
  overriding the rule in the CSS block above that sets it to <span class="css">nowrap</span>.</p>
    <h4 class="heading settled" data-level="10.3.10" id="margin-collapsing-quirks"><span class="secno">10.3.10. </span><span class="content">Margin collapsing quirks</span><a class="self-link" href="rendering.html#margin-collapsing-quirks"></a></h4>
    <p>A node is <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport="" id="substantial">substantial</dfn> if it is a text node
  that is not <a data-link-type="dfn" href="dom.html#inter-element-whitespace" id="ref-for-inter-element-whitespace-18">inter-element whitespace</a>, or if it is an element node.</p>
    <p>A node is <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport="" id="blank">blank</dfn> if it is an element that contains no <a data-link-type="dfn" href="rendering.html#substantial" id="ref-for-substantial-1">substantial</a> nodes.</p>
    <p>The <dfn class="dfn-paneled" data-dfn-type="dfn" data-lt="elements with default margins|element with default margins" data-noexport="" id="elements-with-default-margins">elements with default margins</dfn> are the following elements: <code><a data-link-type="element" href="grouping-content.html#elementdef-blockquote" id="ref-for-elementdef-blockquote-17">blockquote</a></code>, <code><a data-link-type="element" href="obsolete.html#elementdef-dir" id="ref-for-elementdef-dir-2">dir</a></code>, <code><a data-link-type="element" href="grouping-content.html#elementdef-dl" id="ref-for-elementdef-dl-27">dl</a></code>, <code><a data-link-type="element" href="sections.html#elementdef-h1" id="ref-for-elementdef-h1-13">h1</a></code>, <code><a data-link-type="element" href="sections.html#elementdef-h2" id="ref-for-elementdef-h2-9">h2</a></code>, <code><a data-link-type="element" href="sections.html#elementdef-h3" id="ref-for-elementdef-h3-7">h3</a></code>, <code><a data-link-type="element" href="sections.html#elementdef-h4" id="ref-for-elementdef-h4-7">h4</a></code>, <code><a data-link-type="element" href="sections.html#elementdef-h5" id="ref-for-elementdef-h5-7">h5</a></code>, <code><a data-link-type="element" href="sections.html#elementdef-h6" id="ref-for-elementdef-h6-8">h6</a></code>, <code><a data-link-type="element" href="obsolete.html#elementdef-listing" id="ref-for-elementdef-listing-3">listing</a></code>, <code><a data-link-type="element" href="interactive-elements.html#elementdef-menu" id="ref-for-elementdef-menu-41">menu</a></code>, <code><a data-link-type="element" href="grouping-content.html#elementdef-ol" id="ref-for-elementdef-ol-18">ol</a></code>, <code><a data-link-type="element" href="grouping-content.html#elementdef-p" id="ref-for-elementdef-p-72">p</a></code>, <code><a data-link-type="element" href="obsolete.html#elementdef-plaintext" id="ref-for-elementdef-plaintext-4">plaintext</a></code>, <code><a data-link-type="element" href="grouping-content.html#elementdef-pre" id="ref-for-elementdef-pre-18">pre</a></code>, <code><a data-link-type="element" href="grouping-content.html#elementdef-ul" id="ref-for-elementdef-ul-21">ul</a></code>, <code>xmp</code></p>
    <p>In <a data-link-type="dfn" href="infrastructure.html#quirks-mode" id="ref-for-quirks-mode-13">quirks mode</a>, any <a data-link-type="dfn" href="rendering.html#elements-with-default-margins" id="ref-for-elements-with-default-margins-1">element with default margins</a> that is the child of a <code><a data-link-type="element" href="sections.html#elementdef-body" id="ref-for-elementdef-body-130">body</a></code>, <code><a data-link-type="element" href="tabular-data.html#elementdef-td" id="ref-for-elementdef-td-46">td</a></code>, or <code><a data-link-type="element" href="tabular-data.html#elementdef-th" id="ref-for-elementdef-th-59">th</a></code> element and has no <a data-link-type="dfn" href="rendering.html#substantial" id="ref-for-substantial-2">substantial</a> previous siblings is expected to have a user-agent level style sheet rule that sets its <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/CSS21/box.html#propdef-margin-top">margin-top</a> property to zero.</p>
    <p>In <a data-link-type="dfn" href="infrastructure.html#quirks-mode" id="ref-for-quirks-mode-14">quirks mode</a>, any <a data-link-type="dfn" href="rendering.html#elements-with-default-margins" id="ref-for-elements-with-default-margins-2">element
  with default margins</a> that is the child of a <code><a data-link-type="element" href="sections.html#elementdef-body" id="ref-for-elementdef-body-131">body</a></code>, <code><a data-link-type="element" href="tabular-data.html#elementdef-td" id="ref-for-elementdef-td-47">td</a></code>, or <code><a data-link-type="element" href="tabular-data.html#elementdef-th" id="ref-for-elementdef-th-60">th</a></code> element, has no <a data-link-type="dfn" href="rendering.html#substantial" id="ref-for-substantial-3">substantial</a> previous siblings, and is <a data-link-type="dfn" href="rendering.html#blank" id="ref-for-blank-1">blank</a>, is expected to have
  a user-agent level style sheet rule that sets its <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/CSS21/box.html#propdef-margin-bottom">margin-bottom</a> property to zero also.</p>
    <p>In <a data-link-type="dfn" href="infrastructure.html#quirks-mode" id="ref-for-quirks-mode-15">quirks mode</a>, any <a data-link-type="dfn" href="rendering.html#elements-with-default-margins" id="ref-for-elements-with-default-margins-3">element
  with default margins</a> that is the child of a <code><a data-link-type="element" href="tabular-data.html#elementdef-td" id="ref-for-elementdef-td-48">td</a></code> or <code><a data-link-type="element" href="tabular-data.html#elementdef-th" id="ref-for-elementdef-th-61">th</a></code> element, has
  no <a data-link-type="dfn" href="rendering.html#substantial" id="ref-for-substantial-4">substantial</a> following siblings, and is <a data-link-type="dfn" href="rendering.html#blank" id="ref-for-blank-2">blank</a>, is expected to have a user-agent level style sheet
  rule that sets its <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/CSS21/box.html#propdef-margin-top">margin-top</a> property to zero.</p>
    <p>In <a data-link-type="dfn" href="infrastructure.html#quirks-mode" id="ref-for-quirks-mode-16">quirks mode</a>, any <code><a data-link-type="element" href="grouping-content.html#elementdef-p" id="ref-for-elementdef-p-73">p</a></code> element that is the child of a <code><a data-link-type="element" href="tabular-data.html#elementdef-td" id="ref-for-elementdef-td-49">td</a></code> or <code><a data-link-type="element" href="tabular-data.html#elementdef-th" id="ref-for-elementdef-th-62">th</a></code> element and has no <a data-link-type="dfn" href="rendering.html#substantial" id="ref-for-substantial-5">substantial</a> following siblings, is expected to have a
  user-agent level style sheet rule that sets its <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/CSS21/box.html#propdef-margin-bottom">margin-bottom</a> property to zero.</p>
    <h4 class="heading settled" data-level="10.3.11" id="form-controls"><span class="secno">10.3.11. </span><span class="content">Form controls</span><a class="self-link" href="rendering.html#form-controls"></a></h4>
<pre class="highlight"><span class="n">@namespace</span> <span class="nf">url</span><span class="p">(</span><span class="s">http://www.w3.org/1999/xhtml</span><span class="p">);</span>

  <span class="nt">input, select, option, optgroup, button, textarea, keygen </span><span class="p">{</span>
  <span class="k">text-indent</span><span class="p">:</span> initial<span class="p">;</span>
  <span class="p">}</span>

  <span class="nt">input:matches([type=radio i], [type=checkbox i], [type=reset i], [type=button i],</span>
<span class="nt">  [type=submit i], [type=search i]), select, button </span><span class="p">{</span>
  <span class="k">box-sizing</span><span class="p">:</span> border-box<span class="p">;</span>
  <span class="p">}</span>
</pre>
    <p>In <a data-link-type="dfn" href="infrastructure.html#quirks-mode" id="ref-for-quirks-mode-17">quirks mode</a>, the following rules are also expected to apply:</p>
<pre class="highlight"><span class="n">@namespace</span> <span class="nf">url</span><span class="p">(</span><span class="s">http://www.w3.org/1999/xhtml</span><span class="p">);</span>

  <span class="nt">input:not([type=image i]), textarea </span><span class="p">{</span> <span class="k">box-sizing</span><span class="p">:</span> border-box<span class="p">;</span> <span class="p">}</span>
</pre>
    <p>Each kind of form control is also given a specific default binding, as described in subsequent
  sections, which implements the look and feel of the control.</p>
    <h4 class="heading settled" data-level="10.3.12" id="the-hr-element-rendering"><span class="secno">10.3.12. </span><span class="content">The <code><a data-link-type="element" href="grouping-content.html#elementdef-hr" id="ref-for-elementdef-hr-16">hr</a></code> element</span><a class="self-link" href="rendering.html#the-hr-element-rendering"></a></h4>
<pre class="highlight"><span class="n">@namespace</span> <span class="nf">url</span><span class="p">(</span><span class="s">http://www.w3.org/1999/xhtml</span><span class="p">);</span>

  <span class="nt">hr </span><span class="p">{</span> <span class="k">color</span><span class="p">:</span> gray<span class="p">;</span> <span class="k">border-style</span><span class="p">:</span> inset<span class="p">;</span> <span class="k">border-width</span><span class="p">:</span> <span class="m">1</span><span class="l">px</span><span class="p">;</span> <span class="k">margin</span><span class="p">:</span> <span class="m">0</span>.5em auto; }
</pre>
    <p>The following rules are also expected to apply, as <a data-link-type="dfn" href="rendering.html#presentational-hints" id="ref-for-presentational-hints-31">presentational hints</a>:</p>
<pre class="highlight"><span class="n">@namespace</span> <span class="nf">url</span><span class="p">(</span><span class="s">http://www.w3.org/1999/xhtml</span><span class="p">);</span>

  <span class="nt">hr[align=left] </span><span class="p">{</span> <span class="k">margin-left</span><span class="p">:</span> <span class="m">0</span><span class="p">;</span> <span class="k">margin-right</span><span class="p">:</span> auto<span class="p">;</span> <span class="p">}</span>
  <span class="nt">hr[align=right] </span><span class="p">{</span> <span class="k">margin-left</span><span class="p">:</span> auto<span class="p">;</span> <span class="k">margin-right</span><span class="p">:</span> <span class="m">0</span><span class="p">;</span> <span class="p">}</span>
  <span class="nt">hr[align=center] </span><span class="p">{</span> <span class="k">margin-left</span><span class="p">:</span> auto<span class="p">;</span> <span class="k">margin-right</span><span class="p">:</span> auto<span class="p">;</span> <span class="p">}</span>
  <span class="nt">hr[color], hr[noshade] </span><span class="p">{</span> <span class="k">border-style</span><span class="p">:</span> solid<span class="p">;</span> <span class="p">}</span>
</pre>
    <p>If an <code><a data-link-type="element" href="grouping-content.html#elementdef-hr" id="ref-for-elementdef-hr-17">hr</a></code> element has either a <code>color</code> attribute
  or a <code>noshade</code> attribute, and furthermore also has a <code>size</code> attribute, and parsing that attribute’s value using the <a data-link-type="dfn" href="infrastructure.html#parse-that-attributes-value" id="ref-for-parse-that-attributes-value-26">rules for parsing non-negative integers</a> doesn’t generate an error, then the user
  agent is expected to use the parsed value divided by two as a pixel length for <a data-link-type="dfn" href="rendering.html#presentational-hints" id="ref-for-presentational-hints-32">presentational hints</a> for the properties <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/css3-background/#border-top-width">border-top-width</a>, <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/css3-background/#border-right-width">border-right-width</a>, <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/css3-background/#border-bottom-width">border-bottom-width</a>, and <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/css3-background/#border-left-width">border-left-width</a> on the element.</p>
    <p>Otherwise, if an <code><a data-link-type="element" href="grouping-content.html#elementdef-hr" id="ref-for-elementdef-hr-18">hr</a></code> element has neither a <code>color</code> attribute nor a <code>noshade</code> attribute, but does have a <code>size</code> attribute, and parsing that attribute’s value using the <a data-link-type="dfn" href="infrastructure.html#parse-that-attributes-value" id="ref-for-parse-that-attributes-value-27">rules for parsing non-negative integers</a> doesn’t generate an error, then: if the
  parsed value is one, then the user agent is expected to use the attribute as a <a data-link-type="dfn" href="rendering.html#presentational-hints" id="ref-for-presentational-hints-33">presentational hint</a> setting the element’s <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/css3-background/#border-bottom-width">border-bottom-width</a> to 0; otherwise, if the parsed value is greater than one, then the user
  agent is expected to use the parsed value minus two as a pixel length for <a data-link-type="dfn" href="rendering.html#presentational-hints" id="ref-for-presentational-hints-34">presentational
  hints</a> for the <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/CSS21/visudet.html#propdef-height">height</a> property on the element.</p>
    <p>The <code>width</code> attribute on an <code><a data-link-type="element" href="grouping-content.html#elementdef-hr" id="ref-for-elementdef-hr-19">hr</a></code> element <a data-link-type="dfn" href="rendering.html#as-hints-for-the-rendering" id="ref-for-as-hints-for-the-rendering-4">maps
  to the dimension property</a> <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/CSS21/visudet.html#propdef-width">width</a> on the element.</p>
    <p>When an <code><a data-link-type="element" href="grouping-content.html#elementdef-hr" id="ref-for-elementdef-hr-20">hr</a></code> element has a <code>color</code> attribute, its
  value is expected to be parsed using the <a data-link-type="dfn" href="infrastructure.html#rules-for-parsing-a-legacy-color-value" id="ref-for-rules-for-parsing-a-legacy-color-value-9">rules for parsing a legacy color value</a>, and
  if that does not return an error, the user agent is expected to treat the attribute as a <a data-link-type="dfn" href="rendering.html#presentational-hints" id="ref-for-presentational-hints-35">presentational hint</a> setting the element’s <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/CSS21/colors.html#propdef-color">color</a> property to
  the resulting color.</p>
    <h4 class="heading settled" data-level="10.3.13" id="the-fieldset-and-legend-elements"><span class="secno">10.3.13. </span><span class="content">The <code>fieldset</code> and <code><a data-link-type="element" href="sec-forms.html#elementdef-legend" id="ref-for-elementdef-legend-17">legend</a></code> elements</span><a class="self-link" href="rendering.html#the-fieldset-and-legend-elements"></a></h4>
<pre class="highlight"><span class="n">@namespace</span> <span class="nf">url</span><span class="p">(</span><span class="s">http://www.w3.org/1999/xhtml</span><span class="p">);</span>

  <span class="nt">fieldset </span><span class="p">{</span>
  <span class="k">display</span><span class="p">:</span> block<span class="p">;</span>
  <span class="k">margin-left</span><span class="p">:</span> <span class="m">2</span><span class="l">px</span><span class="p">;</span> <span class="k">margin-right</span><span class="p">:</span> <span class="m">2</span><span class="l">px</span><span class="p">;</span>
  <span class="k">border</span><span class="p">:</span> groove <span class="m">2</span><span class="l">px</span> ThreeDFace<span class="p">;</span>
  <span class="k">padding</span><span class="p">:</span> <span class="m">0</span>.35em 0.625em 0.75em;
  min-width: min-content;
  }

  legend {
  padding-left: 2px; padding-right: 2px;
  }
</pre>
    <p>The <code><a data-link-type="element" href="sec-forms.html#elementdef-fieldset" id="ref-for-elementdef-fieldset-41">fieldset</a></code> element is expected to establish a new block formatting context.</p>
    <p>If the <code><a data-link-type="element" href="sec-forms.html#elementdef-fieldset" id="ref-for-elementdef-fieldset-42">fieldset</a></code> element has a child that matches the conditions in the list below,
  then the first such child is the <code><a data-link-type="element" href="sec-forms.html#elementdef-fieldset" id="ref-for-elementdef-fieldset-43">fieldset</a></code> element’s <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport="" id="rendered-legend">rendered legend</dfn>:</p>
    <ul class="brief">
     <li>The child is a <code><a data-link-type="element" href="sec-forms.html#elementdef-legend" id="ref-for-elementdef-legend-18">legend</a></code> element.
     </li><li>The child is not out-of-flow (e.g., not absolutely positioned or floated).
     </li><li>The child is generating a box (e.g., it is not 'display:none').
    </li></ul>
    <p>A <code><a data-link-type="element" href="sec-forms.html#elementdef-fieldset" id="ref-for-elementdef-fieldset-44">fieldset</a></code> element’s <a data-link-type="dfn" href="rendering.html#rendered-legend" id="ref-for-rendered-legend-1">rendered legend</a>, if any, is expected to be
  rendered over the top border edge of the <code><a data-link-type="element" href="sec-forms.html#elementdef-fieldset" id="ref-for-elementdef-fieldset-45">fieldset</a></code> element as a <span class="css">block</span> box
  (overriding any explicit <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/CSS21/visuren.html#propdef-display">display</a> value). In the absence of an explicit width, the box should
  shrink-wrap. If the <code><a data-link-type="element" href="sec-forms.html#elementdef-legend" id="ref-for-elementdef-legend-19">legend</a></code> element in question has an <code>align</code> attribute, and its value is an <a data-link-type="dfn" href="infrastructure.html#ascii-case-insensitive" id="ref-for-ascii-case-insensitive-88">ASCII
  case-insensitive</a> match for one of the strings in the first column of the following table,
  then the <code>legend</code> is expected to be rendered horizontally aligned over the border edge
  in the position given in the corresponding cell on the same row in the second column. If the
  attribute is absent or has a value that doesn’t match any of the cases in the table, then the
  position is expected to be on the right if the <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/css-writing-modes-3/#propdef-direction">direction</a> property on this element has a computed
  value of <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css-writing-modes-3/#valdef-direction-rtl">rtl</a>, and on the left otherwise.</p>
    <table>
     <thead>
      <tr>
       <th>Attribute value 
       </th><th>Alignment position 
     </th></tr></thead><tbody>
      <tr>
       <td><code>left</code> 
       </td><td>On the left 
      </td></tr><tr>
       <td><code>right</code> 
       </td><td>On the right 
      </td></tr><tr>
       <td><code>center</code> 
       </td><td>In the middle 
    </td></tr></tbody></table>
    <h3 class="heading settled" data-level="10.4" id="replaced-elements"><span class="secno">10.4. </span><span class="content">Replaced elements</span><a class="self-link" href="rendering.html#replaced-elements"></a></h3>
    <h4 class="heading settled" data-level="10.4.1" id="replaced-elements-embedded-content"><span class="secno">10.4.1. </span><span class="content">Embedded content</span><a class="self-link" href="rendering.html#replaced-elements-embedded-content"></a></h4>
    <p>The <code><a data-link-type="element" href="semantics-embedded-content.html#elementdef-embed" id="ref-for-elementdef-embed-47">embed</a></code>, <code><a data-link-type="element" href="semantics-embedded-content.html#elementdef-iframe" id="ref-for-elementdef-iframe-73">iframe</a></code>, and <code><a data-link-type="element" href="semantics-embedded-content.html#elementdef-video" id="ref-for-elementdef-video-56">video</a></code> elements are expected to be
  treated as <a data-link-type="dfn" href="infrastructure.html#replaced-element" id="ref-for-replaced-element-1">replaced elements</a>.</p>
    <p>A <code><a data-link-type="element" href="semantics-scripting.html#elementdef-canvas" id="ref-for-elementdef-canvas-59">canvas</a></code> element that <a data-link-type="dfn" href="dom.html#represent" id="ref-for-represent-183">represents</a> <a data-link-type="dfn" href="dom.html#embedded-content" id="ref-for-embedded-content-28">embedded content</a> is
  expected to be treated as a <a data-link-type="dfn" href="infrastructure.html#replaced-element" id="ref-for-replaced-element-2">replaced element</a>; the contents of such elements are the
  element’s bitmap, if any, or else a transparent black bitmap with the same <a data-link-type="dfn" href="infrastructure.html#intrinsic-dimensions" id="ref-for-intrinsic-dimensions-11">intrinsic
  dimensions</a> as the element. Other <code><a data-link-type="element" href="semantics-scripting.html#elementdef-canvas" id="ref-for-elementdef-canvas-60">canvas</a></code> elements are expected to be treated
  as ordinary elements in the rendering model.</p>
    <p>An <code><a data-link-type="element" href="semantics-embedded-content.html#elementdef-object" id="ref-for-elementdef-object-85">object</a></code> element that <a data-link-type="dfn" href="dom.html#represent" id="ref-for-represent-184">represents</a> an image, plugin, or <a data-link-type="dfn" href="browsers.html#nested-browsing-contexts" id="ref-for-nested-browsing-contexts-86">nested browsing context</a> is expected to be treated as a <a data-link-type="dfn" href="infrastructure.html#replaced-element" id="ref-for-replaced-element-3">replaced element</a>. Other <code><a data-link-type="element" href="semantics-embedded-content.html#elementdef-object" id="ref-for-elementdef-object-86">object</a></code> elements are expected to be treated as ordinary elements in the rendering
  model.</p>
    <p>An <code><a data-link-type="element" href="obsolete.html#elementdef-applet" id="ref-for-elementdef-applet-10">applet</a></code> element that <a data-link-type="dfn" href="dom.html#represent" id="ref-for-represent-185">represents</a> a <a data-link-type="dfn" href="infrastructure.html#plugin" id="ref-for-plugin-91">plugin</a> is expected
  to be treated as a <a data-link-type="dfn" href="infrastructure.html#replaced-element" id="ref-for-replaced-element-4">replaced element</a>. Other <code><a data-link-type="element" href="obsolete.html#elementdef-applet" id="ref-for-elementdef-applet-11">applet</a></code> elements are expected
  to be treated as ordinary elements in the rendering model.</p>
    <p>The <code><a data-link-type="element" href="semantics-embedded-content.html#elementdef-audio" id="ref-for-elementdef-audio-27">audio</a></code> element, when it is <a data-link-type="dfn" href="semantics-embedded-content.html#exposing-a-user-interface" id="ref-for-exposing-a-user-interface-6">exposing a user interface</a>, is expected to be treated as a <a data-link-type="dfn" href="infrastructure.html#replaced-element" id="ref-for-replaced-element-5">replaced element</a> about one line high, as wide as is necessary to expose the user
  agent’s user interface features. When an <code><a data-link-type="element" href="semantics-embedded-content.html#elementdef-audio" id="ref-for-elementdef-audio-28">audio</a></code> element is not <a data-link-type="dfn" href="semantics-embedded-content.html#exposing-a-user-interface" id="ref-for-exposing-a-user-interface-7">exposing a user interface</a>, the user agent is expected to force
  its <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/CSS21/visuren.html#propdef-display">display</a> property to compute to <span class="css">none</span>, irrespective of CSS rules.</p>
    <p>Whether a <code><a data-link-type="element" href="semantics-embedded-content.html#elementdef-video" id="ref-for-elementdef-video-57">video</a></code> element is <a data-link-type="dfn" href="semantics-embedded-content.html#exposing-a-user-interface" id="ref-for-exposing-a-user-interface-8">exposing a user interface</a> is not expected to affect the size of the rendering;
  controls are expected to be overlaid above the page content without causing any layout changes,
  and are expected to disappear when the user does not need them.</p>
    <p>When a <code><a data-link-type="element" href="semantics-embedded-content.html#elementdef-video" id="ref-for-elementdef-video-58">video</a></code> element represents a poster frame or frame of video, the poster frame
  or frame of video is expected to be rendered at the largest size that maintains the aspect ratio
  of that poster frame or frame of video without being taller or wider than the <code><a data-link-type="element" href="semantics-embedded-content.html#elementdef-video" id="ref-for-elementdef-video-59">video</a></code> element itself, and is expected to be centered in the <code><a data-link-type="element" href="semantics-embedded-content.html#elementdef-video" id="ref-for-elementdef-video-60">video</a></code> element.</p>
    <p>Any subtitles or captions are expected to be overlayed directly on top of their <code><a data-link-type="element" href="semantics-embedded-content.html#elementdef-video" id="ref-for-elementdef-video-61">video</a></code> element, as defined by the relevant rendering rules; for WebVTT, those are the <a data-link-type="dfn" href="infrastructure.html#rules-for-updating-the-display-of-webvtt-text-tracks" id="ref-for-rules-for-updating-the-display-of-webvtt-text-tracks-5">rules for updating the display of WebVTT text tracks</a>. <a data-link-type="biblio" href="references.html#biblio-webvtt">[WEBVTT]</a></p>
    <p>When the user agent starts <a data-link-type="dfn" href="semantics-embedded-content.html#exposing-a-user-interface" id="ref-for-exposing-a-user-interface-9">exposing a user
  interface</a> for a <code><a data-link-type="element" href="semantics-embedded-content.html#elementdef-video" id="ref-for-elementdef-video-62">video</a></code> element, the user agent should run the <a data-link-type="dfn" href="semantics-embedded-content.html#rules-for-updating-the-text-track-rendering" id="ref-for-rules-for-updating-the-text-track-rendering-12">rules for
  updating the text track rendering</a> of each of the <a data-link-type="dfn" href="semantics-embedded-content.html#text-tracks" id="ref-for-text-tracks-119">text
  tracks</a> in the <code><a data-link-type="element" href="semantics-embedded-content.html#elementdef-video" id="ref-for-elementdef-video-63">video</a></code> element’s <a data-link-type="dfn" href="semantics-embedded-content.html#list-of-text-tracks" id="ref-for-list-of-text-tracks-27">list of text tracks</a> that are <a data-link-type="mode" href="semantics-embedded-content.html#modedef-track-showing" id="ref-for-modedef-track-showing-18">showing</a> and whose <a data-link-type="dfn" href="semantics-embedded-content.html#kind-of-track" id="ref-for-kind-of-track-20">text track kind</a> is one of <code>subtitles</code> or <code>captions</code> (e.g., for <a data-link-type="dfn" href="semantics-embedded-content.html#text-tracks" id="ref-for-text-tracks-120">text
  tracks</a> based on <a data-link-type="dfn" href="infrastructure.html#webvtt" id="ref-for-webvtt-9">WebVTT</a>, the <a data-link-type="dfn" href="infrastructure.html#rules-for-updating-the-display-of-webvtt-text-tracks" id="ref-for-rules-for-updating-the-display-of-webvtt-text-tracks-6">rules for updating the display of WebVTT
  text tracks</a>). <a data-link-type="biblio" href="references.html#biblio-webvtt">[WEBVTT]</a></p>
    <p class="note" role="note"> Resizing <code>video</code> and <code><a data-link-type="element" href="semantics-scripting.html#elementdef-canvas" id="ref-for-elementdef-canvas-61">canvas</a></code> elements does not interrupt
  video playback or clear the canvas. </p>
    <hr>
    <p>The following CSS rules are expected to apply:</p>
<pre class="highlight"><span class="n">@namespace</span> <span class="nf">url</span><span class="p">(</span><span class="s">http://www.w3.org/1999/xhtml</span><span class="p">);</span>

<span class="nt">video </span><span class="p">{</span> <span class="k">object-fit</span><span class="p">:</span> contain<span class="p">;</span> <span class="p">}</span>
</pre>
    <h4 class="heading settled" data-level="10.4.2" id="replaced-elements-images"><span class="secno">10.4.2. </span><span class="content">Images</span><a class="self-link" href="rendering.html#replaced-elements-images"></a></h4>
    <p>User agents are expected to render <code><a data-link-type="element" href="semantics-embedded-content.html#elementdef-img" id="ref-for-elementdef-img-164">img</a></code> elements and <code><a data-link-type="element" href="sec-forms.html#elementdef-input" id="ref-for-elementdef-input-299">input</a></code> elements
  whose <code>type</code> attributes are in the <a data-link-type="element-state" href="sec-forms.html#element-statedef-input-image-button" id="ref-for-element-statedef-input-image-button-20">image button</a> state, according to the first applicable rules
  from the following list:</p>
    <dl class="switch">
     <dt>If the element <a data-link-type="dfn" href="dom.html#represent" id="ref-for-represent-186">represents</a> an image
     </dt><dd>The user agent is expected to treat the element as a <a data-link-type="dfn" href="infrastructure.html#replaced-element" id="ref-for-replaced-element-6">replaced element</a> and
    render the image according to the rules for doing so defined in CSS.
     </dd><dt>
      <p>If the element does not <a data-link-type="dfn" href="dom.html#represent" id="ref-for-represent-187">represent</a> an image, but the element
    already has <a data-link-type="dfn" href="infrastructure.html#intrinsic-dimensions" id="ref-for-intrinsic-dimensions-12">intrinsic dimensions</a> (e.g., from the <a data-link-type="dfn" href="semantics-embedded-content.html#dimension-attributes" id="ref-for-dimension-attributes-7">dimension attributes</a> or CSS rules), and either:</p>
      <ul>
       <li>the user agent has reason to believe that the image will become <i>available</i> and be rendered in due
      course, or 
       </li><li>the element has no <code>alt</code> attribute, or 
       </li><li>the <code>Document</code> is in <a data-link-type="dfn" href="infrastructure.html#quirks-mode" id="ref-for-quirks-mode-18">quirks mode</a> 
      </li></ul>
     </dt><dd>The user agent is expected to treat the element as a <a data-link-type="dfn" href="infrastructure.html#replaced-element" id="ref-for-replaced-element-7">replaced element</a> whose
    content is the text that the element represents, if any, optionally alongside an icon indicating
    that the image is being obtained (if applicable). For <code><a data-link-type="element" href="sec-forms.html#elementdef-input" id="ref-for-elementdef-input-300">input</a></code> elements, the element
    is expected to appear button-like to indicate that the element is a <a data-link-type="dfn" href="sec-forms.html#buttons" id="ref-for-buttons-9">button</a>.
     </dd><dt>If the element is an <code><a data-link-type="element" href="semantics-embedded-content.html#elementdef-img" id="ref-for-elementdef-img-165">img</a></code> element that <a data-link-type="dfn" href="dom.html#represent" id="ref-for-represent-188">represents</a> some text and the
    user agent does not expect this to change
     </dt><dd>The user agent is expected to treat the element as a non-replaced phrasing element whose
    content is the text, optionally with an icon indicating that an image is missing, so that the
    user can request the image be displayed or investigate why it is not rendering. In non-graphical
    contexts, such an icon should be omitted.
     </dd><dt>If the element is an <code><a data-link-type="element" href="semantics-embedded-content.html#elementdef-img" id="ref-for-elementdef-img-166">img</a></code> element that <a data-link-type="dfn" href="dom.html#represent" id="ref-for-represent-189">represents</a> nothing and the
    user agent does not expect this to change
     </dt><dd>The user agent is expected to treat the element as an empty inline element. (In the absence
    of further styles, this will cause the element to essentially not be rendered.)
     </dd><dt>If the element is an <code><a data-link-type="element" href="sec-forms.html#elementdef-input" id="ref-for-elementdef-input-301">input</a></code> element that does not <a data-link-type="dfn" href="dom.html#represent" id="ref-for-represent-190">represent</a> an image and the user agent does not expect this to change
     </dt><dd>The user agent is expected to treat the element as a <a data-link-type="dfn" href="infrastructure.html#replaced-element" id="ref-for-replaced-element-8">replaced element</a> consisting of a button whose content is the element’s alternative text. The <a data-link-type="dfn" href="infrastructure.html#intrinsic-dimensions" id="ref-for-intrinsic-dimensions-13">intrinsic
    dimensions</a> of the button are expected to be about one line in height and whatever width
    is necessary to render the text on one line.
    </dd></dl>
    <p>The icons mentioned above are expected to be relatively small so as not to disrupt most text
  but be easily clickable. In a visual environment, for instance, icons could be 16 pixels by 16
  pixels square, or 1em by 1em if the images are scalable. In an audio environment, the icon could
  be a short bleep. The icons are intended to indicate to the user that they can be used to get to
  whatever options the user agent provides for images, and, where appropriate, are expected to provide
  access to the context menu that would have come up if the user interacted with the actual
  image.</p>
    <hr>
    <p>All animated images with the same <a data-link-type="dfn" href="https://url.spec.whatwg.org/#syntax-url-absolute">absolute URL</a> and the same image data are
  expected to be rendered synchronized to the same timeline as a group, with the timeline starting
  at the time of the least recent addition to the group.</p>
    <p class="note" role="note"> In other words, when a second image with the same <a data-link-type="dfn" href="https://url.spec.whatwg.org/#syntax-url-absolute">absolute URL</a> and
  animated image data is <a data-link-type="dfn" href="infrastructure.html#document-inserted-into-the-document" id="ref-for-document-inserted-into-the-document-21">inserted into a document</a>, it jumps to the point in the animation cycle that
  is currently being displayed by the first image. </p>
    <p>When a user agent is to <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport="" id="restart-the-animation">restart the animation</dfn> for an <code><a data-link-type="element" href="semantics-embedded-content.html#elementdef-img" id="ref-for-elementdef-img-167">img</a></code> element
  showing an animated image, all animated images with the same <a data-link-type="dfn" href="https://url.spec.whatwg.org/#syntax-url-absolute">absolute URL</a> and the
  same image data in that <code><a data-link-type="element" href="semantics-embedded-content.html#elementdef-img" id="ref-for-elementdef-img-168">img</a></code> element’s <a data-link-type="dfn" href="https://www.w3.org/TR/dom/#concept-node-document">node document</a> are expected to restart
  their animation from the beginning.</p>
    <hr>
    <p>The following CSS rules are expected to apply when the <code>Document</code> is in <a data-link-type="dfn" href="infrastructure.html#quirks-mode" id="ref-for-quirks-mode-19">quirks
  mode</a>:</p>
<pre class="highlight"><span class="n">@namespace</span> <span class="nf">url</span><span class="p">(</span><span class="s">http://www.w3.org/1999/xhtml</span><span class="p">);</span>

<span class="nt">img[align=left i] </span><span class="p">{</span> <span class="k">margin-right</span><span class="p">:</span> <span class="m">3</span><span class="l">px</span><span class="p">;</span> <span class="p">}</span>
<span class="nt">img[align=right i] </span><span class="p">{</span> <span class="k">margin-left</span><span class="p">:</span> <span class="m">3</span><span class="l">px</span><span class="p">;</span> <span class="p">}</span>
</pre>
    <h4 class="heading settled" data-level="10.4.3" id="attributes-for-embedded-content-and-images"><span class="secno">10.4.3. </span><span class="content">Attributes for embedded content and images</span><a class="self-link" href="rendering.html#attributes-for-embedded-content-and-images"></a></h4>
    <p>The following CSS rules are expected to apply as <a data-link-type="dfn" href="rendering.html#presentational-hints" id="ref-for-presentational-hints-36">presentational hints</a>:</p>
<pre class="highlight"><span class="n">@namespace</span> <span class="nf">url</span><span class="p">(</span><span class="s">http://www.w3.org/1999/xhtml</span><span class="p">);</span>

<span class="nt">iframe[frameborder=0], iframe[frameborder=no i] </span><span class="p">{</span> <span class="k">border</span><span class="p">:</span> none<span class="p">;</span> <span class="p">}</span>

<span class="nt">applet[align=left i], embed[align=left i], iframe[align=left i],</span>
<span class="nt">img[align=left i], input[type=image i][align=left i], object[align=left i] </span><span class="p">{</span>
  <span class="k">float</span><span class="p">:</span> left<span class="p">;</span>
<span class="p">}</span>

<span class="nt">applet[align=right i], embed[align=right i], iframe[align=right i],</span>
<span class="nt">img[align=right i], input[type=image i][align=right i], object[align=right i] </span><span class="p">{</span>
  <span class="k">float</span><span class="p">:</span> right<span class="p">;</span>
<span class="p">}</span>

<span class="nt">applet[align=top i], embed[align=top i], iframe[align=top i],</span>
<span class="nt">img[align=top i], input[type=image i][align=top i], object[align=top i] </span><span class="p">{</span>
  <span class="k">vertical-align</span><span class="p">:</span> top<span class="p">;</span>
<span class="p">}</span>

<span class="nt">applet[align=baseline i], embed[align=baseline i], iframe[align=baseline i],</span>
<span class="nt">img[align=baseline i], input[type=image i][align=baseline i], object[align=baseline i] </span><span class="p">{</span>
  <span class="k">vertical-align</span><span class="p">:</span> baseline<span class="p">;</span>
<span class="p">}</span>

<span class="nt">applet[align=texttop i], embed[align=texttop i], iframe[align=texttop i],</span>
<span class="nt">img[align=texttop i], input[type=image i][align=texttop i], object[align=texttop i] </span><span class="p">{</span>
  <span class="k">vertical-align</span><span class="p">:</span> text-top<span class="p">;</span>
<span class="p">}</span>

<span class="nt">applet[align=absmiddle i], embed[align=absmiddle i], iframe[align=absmiddle i],</span>
<span class="nt">img[align=absmiddle i], input[type=image i][align=absmiddle i], object[align=absmiddle i],</span>
<span class="nt">applet[align=abscenter i], embed[align=abscenter i], iframe[align=abscenter i],</span>
<span class="nt">img[align=abscenter i], input[type=image i][align=abscenter i], object[align=abscenter i] </span><span class="p">{</span>
  <span class="k">vertical-align</span><span class="p">:</span> middle<span class="p">;</span>
<span class="p">}</span>

<span class="nt">applet[align=bottom i], embed[align=bottom i], iframe[align=bottom i],</span>
<span class="nt">img[align=bottom i], input[type=image i][align=bottom i],</span>
<span class="nt">object[align=bottom i] </span><span class="p">{</span>
  <span class="k">vertical-align</span><span class="p">:</span> bottom<span class="p">;</span>
<span class="p">}</span>
</pre>
    <p>When an <code><a data-link-type="element" href="obsolete.html#elementdef-applet" id="ref-for-elementdef-applet-12">applet</a></code>, <code><a data-link-type="element" href="semantics-embedded-content.html#elementdef-embed" id="ref-for-elementdef-embed-48">embed</a></code>, <code><a data-link-type="element" href="semantics-embedded-content.html#elementdef-iframe" id="ref-for-elementdef-iframe-74">iframe</a></code>, <code><a data-link-type="element" href="semantics-embedded-content.html#elementdef-img" id="ref-for-elementdef-img-169">img</a></code>, or <code><a data-link-type="element" href="semantics-embedded-content.html#elementdef-object" id="ref-for-elementdef-object-87">object</a></code> element, or an <code><a data-link-type="element" href="sec-forms.html#elementdef-input" id="ref-for-elementdef-input-302">input</a></code> element whose <code>type</code> attribute is in the <a data-link-type="element-state" href="sec-forms.html#element-statedef-input-image-button" id="ref-for-element-statedef-input-image-button-21">image button</a> state, has an <code>align</code> attribute whose value is an <a data-link-type="dfn" href="infrastructure.html#ascii-case-insensitive" id="ref-for-ascii-case-insensitive-89">ASCII case-insensitive</a> match for the string "<code>center</code>" or the string "<code>middle</code>", the user agent is expected
  to act as if the element’s <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/CSS21/visudet.html#propdef-vertical-align">vertical-align</a> property was set to a value that aligns the vertical
  middle of the element with the parent element’s baseline.</p>
    <p>The <code>hspace</code> attribute of <code><a data-link-type="element" href="obsolete.html#elementdef-applet" id="ref-for-elementdef-applet-13">applet</a></code>, <code><a data-link-type="element" href="semantics-embedded-content.html#elementdef-embed" id="ref-for-elementdef-embed-49">embed</a></code>, <code><a data-link-type="element" href="semantics-embedded-content.html#elementdef-iframe" id="ref-for-elementdef-iframe-75">iframe</a></code>, <code><a data-link-type="element" href="semantics-embedded-content.html#elementdef-img" id="ref-for-elementdef-img-170">img</a></code>, or <code><a data-link-type="element" href="semantics-embedded-content.html#elementdef-object" id="ref-for-elementdef-object-88">object</a></code> elements, and <code>input</code> elements with a <code>type</code> attribute in the <a data-link-type="element-state" href="sec-forms.html#element-statedef-input-image-button" id="ref-for-element-statedef-input-image-button-22">image button</a> state, <a data-link-type="dfn" href="rendering.html#as-hints-for-the-rendering" id="ref-for-as-hints-for-the-rendering-5">maps to the dimension properties</a> <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/CSS21/box.html#propdef-margin-left">margin-left</a> and <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/CSS21/box.html#propdef-margin-right">margin-right</a> on the
  element.</p>
    <p>The <code>vspace</code> attribute of <code><a data-link-type="element" href="obsolete.html#elementdef-applet" id="ref-for-elementdef-applet-14">applet</a></code>, <code><a data-link-type="element" href="semantics-embedded-content.html#elementdef-embed" id="ref-for-elementdef-embed-50">embed</a></code>, <code><a data-link-type="element" href="semantics-embedded-content.html#elementdef-iframe" id="ref-for-elementdef-iframe-76">iframe</a></code>, <code><a data-link-type="element" href="semantics-embedded-content.html#elementdef-img" id="ref-for-elementdef-img-171">img</a></code>, or <code><a data-link-type="element" href="semantics-embedded-content.html#elementdef-object" id="ref-for-elementdef-object-89">object</a></code> elements, and <code>input</code> elements with a <code>type</code> attribute in the <a data-link-type="element-state" href="sec-forms.html#element-statedef-input-image-button" id="ref-for-element-statedef-input-image-button-23">image button</a> state, <a data-link-type="dfn" href="rendering.html#as-hints-for-the-rendering" id="ref-for-as-hints-for-the-rendering-6">maps to the dimension properties</a> <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/CSS21/box.html#propdef-margin-top">margin-top</a> and <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/CSS21/box.html#propdef-margin-bottom">margin-bottom</a> on the
  element.</p>
    <p>When an <code><a data-link-type="element" href="semantics-embedded-content.html#elementdef-img" id="ref-for-elementdef-img-172">img</a></code> element, <code><a data-link-type="element" href="semantics-embedded-content.html#elementdef-object" id="ref-for-elementdef-object-90">object</a></code> element, or <code><a data-link-type="element" href="sec-forms.html#elementdef-input" id="ref-for-elementdef-input-303">input</a></code> element
  with a <code>type</code> attribute in the <a data-link-type="element-state" href="sec-forms.html#element-statedef-input-image-button" id="ref-for-element-statedef-input-image-button-24">image button</a> state has a <code>border</code> attribute whose value, when parsed using the <a data-link-type="dfn" href="infrastructure.html#parse-that-attributes-value" id="ref-for-parse-that-attributes-value-28">rules for
  parsing non-negative integers</a>, is found to be a number greater than zero, the user agent is
  expected to use the parsed value for eight <a data-link-type="dfn" href="rendering.html#presentational-hints" id="ref-for-presentational-hints-37">presentational hints</a>: four setting the
  parsed value as a pixel length for the element’s <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/css3-background/#border-top-width">border-top-width</a>, <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/css3-background/#border-right-width">border-right-width</a>, <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/css3-background/#border-bottom-width">border-bottom-width</a>, and <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/css3-background/#border-left-width">border-left-width</a> properties, and four setting the element’s <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/css3-background/#border-top-style">border-top-style</a>, <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/css3-background/#border-right-style">border-right-style</a>, <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/css3-background/#border-bottom-style">border-bottom-style</a>, and <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/css3-background/#border-left-style">border-left-style</a> properties to the value <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css3-background/#solid">solid</a>.</p>
    <p>The <code>width</code> and <code>height</code> attributes on <code><a data-link-type="element" href="obsolete.html#elementdef-applet" id="ref-for-elementdef-applet-15">applet</a></code>, <code><a data-link-type="element" href="semantics-embedded-content.html#elementdef-embed" id="ref-for-elementdef-embed-51">embed</a></code>, <code><a data-link-type="element" href="semantics-embedded-content.html#elementdef-iframe" id="ref-for-elementdef-iframe-77">iframe</a></code>, <code><a data-link-type="element" href="semantics-embedded-content.html#elementdef-img" id="ref-for-elementdef-img-173">img</a></code>, <code>object</code> or <code><a data-link-type="element" href="semantics-embedded-content.html#elementdef-video" id="ref-for-elementdef-video-64">video</a></code> elements, and <code><a data-link-type="element" href="sec-forms.html#elementdef-input" id="ref-for-elementdef-input-304">input</a></code> elements with a <code>type</code> attribute in the <a data-link-type="element-state" href="sec-forms.html#element-statedef-input-image-button" id="ref-for-element-statedef-input-image-button-25">image button</a> state and that either represents an image
  or that the user expects will eventually represent an image, map to the dimension properties <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/CSS21/visudet.html#propdef-width">width</a> and <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/CSS21/visudet.html#propdef-height">height</a> on the element
  respectively.</p>
    <h4 class="heading settled" data-level="10.4.4" id="replaced-elements-image-maps"><span class="secno">10.4.4. </span><span class="content">Image maps</span><a class="self-link" href="rendering.html#replaced-elements-image-maps"></a></h4>
    <p>Shapes on an <a data-link-type="dfn" href="semantics-embedded-content.html#image-map" id="ref-for-image-map-11">image map</a> are expected to act, for the purpose of the CSS cascade, as
  elements independent of the original <code><a data-link-type="element" href="semantics-embedded-content.html#elementdef-area" id="ref-for-elementdef-area-94">area</a></code> element that happen to match the same style
  rules but inherit from the <code><a data-link-type="element" href="semantics-embedded-content.html#elementdef-img" id="ref-for-elementdef-img-174">img</a></code> or <code><a data-link-type="element" href="semantics-embedded-content.html#elementdef-object" id="ref-for-elementdef-object-91">object</a></code> element.</p>
    <p>For the purposes of the rendering, only the <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/css3-ui/#propdef-cursor">cursor</a> property is expected to have any effect on
  the shape.</p>
    <p class="example" id="example-5ca272a6"><a class="self-link" href="rendering.html#example-5ca272a6"></a> Thus, for example, if an <code><a data-link-type="element" href="semantics-embedded-content.html#elementdef-area" id="ref-for-elementdef-area-95">area</a></code> element has a <code><a data-link-type="element-sub" href="dom.html#element-attrdef-global-style" id="ref-for-element-attrdef-global-style-7">style</a></code> attribute that sets the <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/css3-ui/#propdef-cursor">cursor</a> property to <span class="css">help</span>, then when the
  user designates that shape, the cursor would change to a Help cursor. </p>
    <p class="example" id="example-6f661568"><a class="self-link" href="rendering.html#example-6f661568"></a> Similarly, if an <code><a data-link-type="element" href="semantics-embedded-content.html#elementdef-area" id="ref-for-elementdef-area-96">area</a></code> element had a CSS rule that set its <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/css3-ui/#propdef-cursor">cursor</a> property to <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css-cascade-3/#valdef-all-inherit">inherit</a> (or if no rule setting the <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/css3-ui/#propdef-cursor">cursor</a> property matched the element at all),
  the shape’s cursor would be inherited from the <code>img</code> or <code><a data-link-type="element" href="semantics-embedded-content.html#elementdef-object" id="ref-for-elementdef-object-92">object</a></code> element of
  the <a data-link-type="dfn" href="semantics-embedded-content.html#image-map" id="ref-for-image-map-12">image map</a>, not from the parent of the <code><a data-link-type="element" href="semantics-embedded-content.html#elementdef-area" id="ref-for-elementdef-area-97">area</a></code> element. </p>
    <h3 class="heading settled" data-level="10.5" id="bindings"><span class="secno">10.5. </span><span class="content">Bindings</span><a class="self-link" href="rendering.html#bindings"></a></h3>
    <h4 class="heading settled" data-level="10.5.1" id="bindings-introduction"><span class="secno">10.5.1. </span><span class="content">Introduction</span><a class="self-link" href="rendering.html#bindings-introduction"></a></h4>
    <p>Exactly how the bindings are implemented is not specified by this specification. User agents
  are encouraged to make their bindings set the <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-ui-4/#propdef-appearance">appearance</a> CSS property appropriately to achieve
  platform-native appearances for widgets, and are expected to implement any relevant animations,
  etc, that are appropriate for the platform. <a data-link-type="biblio" href="references.html#biblio-css-ui-3">[CSS-UI-3]</a></p>
    <h4 class="heading settled" data-level="10.5.2" id="the-button-element-rendering"><span class="secno">10.5.2. </span><span class="content">The <code><a data-link-type="element" href="sec-forms.html#elementdef-button" id="ref-for-elementdef-button-42">button</a></code> element</span><a class="self-link" href="rendering.html#the-button-element-rendering"></a></h4>
    <p>When the <i>button</i> binding applies to a <code><a data-link-type="element" href="sec-forms.html#elementdef-button" id="ref-for-elementdef-button-43">button</a></code> element, the element
  is expected to render as an <span class="css">inline-block</span> box rendered as a button whose contents are the
  contents of the element.</p>
    <p>When the <code><a data-link-type="element" href="sec-forms.html#elementdef-button" id="ref-for-elementdef-button-44">button</a></code> element’s <code>type</code> attribute is
  in the <a data-link-type="element-state" href="sec-forms.html#element-statedef-button-type-menu" id="ref-for-element-statedef-button-type-menu-7">Menu</a> state, the user agent is expected to
  indicate that activating the element will display a menu, e.g., by displaying a down-pointing
  triangle after the button’s label.</p>
    <h4 class="heading settled" data-level="10.5.3" id="the-details-element-rendering"><span class="secno">10.5.3. </span><span class="content">The <code><a data-link-type="element" href="interactive-elements.html#elementdef-details" id="ref-for-elementdef-details-21">details</a></code> element</span><a class="self-link" href="rendering.html#the-details-element-rendering"></a></h4>
    <p>When the <i>details</i> binding applies to a <code><a data-link-type="element" href="interactive-elements.html#elementdef-details" id="ref-for-elementdef-details-22">details</a></code> element, the element
  is expected to render as a <span class="css">block</span> box with its <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/CSS21/box.html#propdef-padding-left">padding-left</a> property set to "40px" for
  left-to-right elements (<a data-link-type="dfn" href="rendering.html#ltr-specific" id="ref-for-ltr-specific-1">LTR-specific</a>) and with its <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/CSS21/box.html#propdef-padding-right">padding-right</a> property set to
  "40px" for right-to-left elements. The element’s shadow tree is expected to take the element’s
  first child <code><a data-link-type="element" href="interactive-elements.html#elementdef-summary" id="ref-for-elementdef-summary-8">summary</a></code> element, if any, and place it in a first <span class="css">block</span> box container,
  and then take the element’s remaining descendants, if any, and place them in a second <span class="css">block</span> box
  container.</p>
    <p>The first container is expected to contain at least one line box, and that line box is expected
  to contain a disclosure widget (typically a triangle), horizontally positioned within the left
  padding of the <code><a data-link-type="element" href="interactive-elements.html#elementdef-details" id="ref-for-elementdef-details-23">details</a></code> element. That widget is expected to allow the user to request
  that the details be shown or hidden.</p>
    <p>The second container is expected to have its <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/css-overflow-3/#propdef-overflow">overflow</a> property set to <span class="css">hidden</span>. When the <code><a data-link-type="element" href="interactive-elements.html#elementdef-details" id="ref-for-elementdef-details-24">details</a></code> element does not have an <code><a data-link-type="element-sub" href="interactive-elements.html#element-attrdef-details-open" id="ref-for-element-attrdef-details-open-1">open</a></code> attribute, this second container is expected to be removed from the rendering.</p>
    <h4 class="heading settled" data-level="10.5.4" id="the-input-element-as-a-text-entry-widget"><span class="secno">10.5.4. </span><span class="content">The <code><a data-link-type="element" href="sec-forms.html#elementdef-input" id="ref-for-elementdef-input-305">input</a></code> element as a text entry widget</span><a class="self-link" href="rendering.html#the-input-element-as-a-text-entry-widget"></a></h4>
    <p>When the <i>input-textfield</i> binding applies to an <code><a data-link-type="element" href="sec-forms.html#elementdef-input" id="ref-for-elementdef-input-306">input</a></code> element whose <code>type</code> attribute is in the <a data-link-type="element-state" href="sec-forms.html#element-statedef-input-text" id="ref-for-element-statedef-input-text-58">Text</a>, <a data-link-type="element-state" href="sec-forms.html#element-statedef-input-search" id="ref-for-element-statedef-input-search-21">Search</a>, <a data-link-type="element-state" href="sec-forms.html#element-statedef-input-telephone" id="ref-for-element-statedef-input-telephone-12">Telephone</a>, <a data-link-type="element-state" href="sec-forms.html#element-statedef-input-url" id="ref-for-element-statedef-input-url-15">URL</a>,
  or <a data-link-type="element-state" href="sec-forms.html#element-statedef-input-e-mail" id="ref-for-element-statedef-input-e-mail-17">E-mail</a> state, the element is expected to render as
  an <span class="css">inline-block</span> box rendered as a text field.</p>
    <p>When the <i>input-password</i> binding applies to an <code><a data-link-type="element" href="sec-forms.html#elementdef-input" id="ref-for-elementdef-input-307">input</a></code> element whose <code>type</code> attribute is in the <a data-link-type="element-state" href="sec-forms.html#element-statedef-input-password" id="ref-for-element-statedef-input-password-11">Password</a> state, the element is expected to render as an <span class="css">inline-block</span> box rendered as a text field whose contents are obscured.</p>
    <p>If these text fields provide a text selection, then, when the user changes the current
  selection in such a binding, the user agent is expected to <a data-link-type="dfn" href="webappapis.html#queuing" id="ref-for-queuing-139">queue a task</a> to <a data-link-type="dfn" href="infrastructure.html#fire" id="ref-for-fire-159">fire
  a simple event</a> that bubbles named <code>select</code> at the element,
  using the <a data-link-type="dfn" href="webappapis.html#user-interaction-task-source" id="ref-for-user-interaction-task-source-11">user interaction task source</a> as the task source.</p>
    <p>If an <code><a data-link-type="element" href="sec-forms.html#elementdef-input" id="ref-for-elementdef-input-308">input</a></code> element whose <code>type</code> attribute is
  in one of the above states has a <code>size</code> attribute, and parsing
  that attribute’s value using the <a data-link-type="dfn" href="infrastructure.html#parse-that-attributes-value" id="ref-for-parse-that-attributes-value-29">rules for parsing non-negative integers</a> doesn’t
  generate an error, then the user agent is expected to use the attribute as a <a data-link-type="dfn" href="rendering.html#presentational-hints" id="ref-for-presentational-hints-38">presentational hint</a> for the <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/CSS21/visudet.html#propdef-width">width</a> property on the element,
  with the value obtained from applying the <a data-link-type="dfn" href="rendering.html#converting-a-character-width-to-pixels" id="ref-for-converting-a-character-width-to-pixels-1">converting a character width to pixels</a> algorithm to the value of the attribute.</p>
    <p>If an <code><a data-link-type="element" href="sec-forms.html#elementdef-input" id="ref-for-elementdef-input-309">input</a></code> element whose <code>type</code> attribute is
  in one of the above states does <em>not</em> have a <code>size</code> attribute, then the user agent is expected to act as if it had a user-agent-level style sheet rule
  setting the <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/CSS21/visudet.html#propdef-width">width</a> property on the element to the value obtained from applying the <a data-link-type="dfn" href="rendering.html#converting-a-character-width-to-pixels" id="ref-for-converting-a-character-width-to-pixels-2">converting a character width to pixels</a> algorithm to the number 20.</p>
    <p>The <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport="" id="converting-a-character-width-to-pixels">converting a character width to pixels</dfn> algorithm returns (<var>size</var>-1)×<var>avg</var>&nbsp;+&nbsp;<var>max</var>,
  where <var>size</var> is the character width to convert, <var>avg</var> is the
  average character width of the primary font for the element for which the algorithm is being run,
  in pixels, and <var>max</var> is the maximum character width of that same font, also in
  pixels. (The element’s <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/css-text-3/#letter-spacing">letter-spacing</a> property does not affect the result.)</p>
    <p>When the <i>input-textfield</i> binding applies to an element, the <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/CSS21/visudet.html#propdef-line-height">line-height</a> property, if it has a computed value equivalent to a value that is less than 1.0, must have a used
  value of 1.0.</p>
    <h4 class="heading settled" data-level="10.5.5" id="the-input-element-as-domain-specific-widgets"><span class="secno">10.5.5. </span><span class="content">The <code><a data-link-type="element" href="sec-forms.html#elementdef-input" id="ref-for-elementdef-input-310">input</a></code> element as domain-specific widgets</span><a class="self-link" href="rendering.html#the-input-element-as-domain-specific-widgets"></a></h4>
    <p>When the <i>input-datetime</i> binding applies to an <code><a data-link-type="element" href="sec-forms.html#elementdef-input" id="ref-for-elementdef-input-311">input</a></code> element whose <code>type</code> attribute is in the <a data-link-type="element-state" href="sec-forms.html#element-statedef-input-date-and-time" id="ref-for-element-statedef-input-date-and-time-11">Date and Time</a> state, the element is expected to render as
  an <span class="css">inline-block</span> box depicting a Date and Time control.</p>
    <p>When the <i>input-date</i> binding applies to an <code><a data-link-type="element" href="sec-forms.html#elementdef-input" id="ref-for-elementdef-input-312">input</a></code> element whose <code>type</code> attribute is in the <a data-link-type="element-state" href="sec-forms.html#element-statedef-input-date" id="ref-for-element-statedef-input-date-10">Date</a> state, the element is expected to render as an <span class="css">inline-block</span> box depicting a Date control.</p>
    <p>When the <i>input-month</i> binding applies to an <code><a data-link-type="element" href="sec-forms.html#elementdef-input" id="ref-for-elementdef-input-313">input</a></code> element whose <code>type</code> attribute is in the <a data-link-type="element-state" href="sec-forms.html#element-statedef-input-month" id="ref-for-element-statedef-input-month-7">Month</a> state, the element is expected to render as an <span class="css">inline-block</span> box depicting a Month control.</p>
    <p>When the <i>input-week</i> binding applies to an <code><a data-link-type="element" href="sec-forms.html#elementdef-input" id="ref-for-elementdef-input-314">input</a></code> element whose <code>type</code> attribute is in the <a data-link-type="element-state" href="sec-forms.html#element-statedef-input-week" id="ref-for-element-statedef-input-week-6">Week</a> state, the element is expected to render as an <span class="css">inline-block</span> box depicting a Week control.</p>
    <p>When the <i>input-time</i> binding applies to an <code><a data-link-type="element" href="sec-forms.html#elementdef-input" id="ref-for-elementdef-input-315">input</a></code> element whose <code>type</code> attribute is in the <a data-link-type="element-state" href="sec-forms.html#element-statedef-input-time" id="ref-for-element-statedef-input-time-5">Time</a> state, the element is expected to render as an <span class="css">inline-block</span> box depicting a Time control.</p>
    <p>When the <i>input-datetime-local</i> binding applies to an <code><a data-link-type="element" href="sec-forms.html#elementdef-input" id="ref-for-elementdef-input-316">input</a></code> element
  whose <code>type</code> attribute is in the <a data-link-type="element-state" href="sec-forms.html#element-statedef-input-local-date-and-time" id="ref-for-element-statedef-input-local-date-and-time-4">Local Date and Time</a> state, the element is expected
  to render as an <span class="css">inline-block</span> box depicting a Local Date and Time control.</p>
    <p>When the <i>input-number</i> binding applies to an <code><a data-link-type="element" href="sec-forms.html#elementdef-input" id="ref-for-elementdef-input-317">input</a></code> element whose <code>type</code> attribute is in the <a data-link-type="element-state" href="sec-forms.html#element-statedef-input-number" id="ref-for-element-statedef-input-number-15">Number</a> state, the element is expected to render as an <span class="css">inline-block</span> box depicting a Number control.</p>
    <p>These controls are all expected to be about one line high, and about as wide as necessary to
  show the widest possible value.</p>
    <h4 class="heading settled" data-level="10.5.6" id="the-input-element-as-a-range-control"><span class="secno">10.5.6. </span><span class="content">The <code><a data-link-type="element" href="sec-forms.html#elementdef-input" id="ref-for-elementdef-input-318">input</a></code> element as a range control</span><a class="self-link" href="rendering.html#the-input-element-as-a-range-control"></a></h4>
    <p>When the <i>input-range</i> binding applies to an <code><a data-link-type="element" href="sec-forms.html#elementdef-input" id="ref-for-elementdef-input-319">input</a></code> element whose <code><a data-link-type="element-sub" href="sec-forms.html#element-attrdef-input-type" id="ref-for-element-attrdef-input-type-145">type</a></code> attribute is in the <a data-link-type="element-state" href="sec-forms.html#element-statedef-input-range" id="ref-for-element-statedef-input-range-8">Range</a> state, the element is
  expected to render as an <span class="css">inline-block</span> box depicting a slider control.</p>
    <p>When the control is wider than it is tall (or square), the control is expected to be a
  horizontal slider, with the lowest value on the right if the <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/css-writing-modes-3/#propdef-direction">direction</a> property on this element
  has a computed value of <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css-writing-modes-3/#valdef-direction-rtl">rtl</a>, and on the left otherwise. When the control is taller than it is
  wide, it is expected to be a vertical slider, with the lowest value on the bottom.</p>
    <p>Predefined suggested values (provided by the <code>list</code> attribute) are expected to be shown as tick marks on the slider, which the slider can snap to.</p>
    <p>User agents are expected to use the used value of the <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/css-writing-modes-3/#propdef-direction">direction</a> property on the element to
  determine the direction in which the slider operates. Typically, a left-to-right (<a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css-writing-modes-3/#valdef-direction-ltr">ltr</a>)
  horizontal control would have the lowest value on the left and the highest value on the right, and
  vice versa.</p>
    <h4 class="heading settled" data-level="10.5.7" id="the-input-element-as-a-color-well"><span class="secno">10.5.7. </span><span class="content">The <code><a data-link-type="element" href="sec-forms.html#elementdef-input" id="ref-for-elementdef-input-320">input</a></code> element as a color well</span><a class="self-link" href="rendering.html#the-input-element-as-a-color-well"></a></h4>
    <p>When the <i>input-color</i> binding applies to an <code><a data-link-type="element" href="sec-forms.html#elementdef-input" id="ref-for-elementdef-input-321">input</a></code> element whose <code>type</code> attribute is in the <a data-link-type="element-state" href="sec-forms.html#element-statedef-input-color" id="ref-for-element-statedef-input-color-5">Color</a> state, the element is expected to render as an <span class="css">inline-block</span> box depicting a color well, which, when activated, provides the user with a color
  picker (e.g., a color wheel or color palette) from which the color can be changed.</p>
    <p>Predefined suggested values (provided by the <code>list</code> attribute) are expected to be shown in the color picker interface, not on the color well
  itself.</p>
    <h4 class="heading settled" data-level="10.5.8" id="the-input-element-as-a-checkbox-and-radio-button-widgets"><span class="secno">10.5.8. </span><span class="content">The <code><a data-link-type="element" href="sec-forms.html#elementdef-input" id="ref-for-elementdef-input-322">input</a></code> element as a checkbox and radio button widgets</span><a class="self-link" href="rendering.html#the-input-element-as-a-checkbox-and-radio-button-widgets"></a></h4>
    <p>When the <i>input-checkbox</i> binding applies to an <code><a data-link-type="element" href="sec-forms.html#elementdef-input" id="ref-for-elementdef-input-323">input</a></code> element whose <code>type</code> attribute is in the <a data-link-type="element-state" href="sec-forms.html#element-statedef-input-checkbox" id="ref-for-element-statedef-input-checkbox-14">Checkbox</a> state, the element is expected to render as an <span class="css">inline-block</span> box containing a single checkbox control, with no label.</p>
    <p>When the <i>input-radio</i> binding applies to an <code><a data-link-type="element" href="sec-forms.html#elementdef-input" id="ref-for-elementdef-input-324">input</a></code> element whose <code>type</code> attribute is in the <a data-link-type="element-state" href="sec-forms.html#element-statedef-input-radio-button" id="ref-for-element-statedef-input-radio-button-15">Radio Button</a> state, the element is expected to render as an <span class="css">inline-block</span> box containing a single radio button control, with no label.</p>
    <h4 class="heading settled" data-level="10.5.9" id="the-input-element-as-a-file-upload-control"><span class="secno">10.5.9. </span><span class="content">The <code><a data-link-type="element" href="sec-forms.html#elementdef-input" id="ref-for-elementdef-input-325">input</a></code> element as a file upload control</span><a class="self-link" href="rendering.html#the-input-element-as-a-file-upload-control"></a></h4>
    <p>When the <i>input-file</i> binding applies to an <code><a data-link-type="element" href="sec-forms.html#elementdef-input" id="ref-for-elementdef-input-326">input</a></code> element whose <code>type</code> attribute is in the <a data-link-type="element-state" href="sec-forms.html#element-statedef-input-file-upload" id="ref-for-element-statedef-input-file-upload-11">File Upload</a> state, the element is expected to render as an <span class="css">inline-block</span> box containing a span of text giving the file name(s) of the <a data-link-type="dfn" href="sec-forms.html#selected-files" id="ref-for-selected-files-15">selected files</a>, if any, followed by a button that,
  when activated, provides the user with a file picker from which the selection can be changed.</p>
    <h4 class="heading settled" data-level="10.5.10" id="the-input-element-as-a-button"><span class="secno">10.5.10. </span><span class="content">The <code><a data-link-type="element" href="sec-forms.html#elementdef-input" id="ref-for-elementdef-input-327">input</a></code> element as a button</span><a class="self-link" href="rendering.html#the-input-element-as-a-button"></a></h4>
    <p>When the <i>input-button</i> binding applies to an <code><a data-link-type="element" href="sec-forms.html#elementdef-input" id="ref-for-elementdef-input-328">input</a></code> element whose <code>type</code> attribute is in the <a data-link-type="element-state" href="sec-forms.html#element-statedef-input-submit-button" id="ref-for-element-statedef-input-submit-button-18">submit button</a>, <a data-link-type="element-state" href="sec-forms.html#element-statedef-input-reset-button" id="ref-for-element-statedef-input-reset-button-8">Reset Button</a>, or <a data-link-type="element-state" href="sec-forms.html#element-statedef-input-button" id="ref-for-element-statedef-input-button-7">Button</a> state, the element is
  expected to render as an <span class="css">inline-block</span> box rendered as a button, about one line high, containing
  the contents of the element’s <code>value</code> attribute, if any, or
  text derived from the element’s <code>type</code> attribute in a
  user-agent-defined (and probably locale-specific) fashion, if not.</p>
    <h4 class="heading settled" data-level="10.5.11" id="the-marquee-element-rendering"><span class="secno">10.5.11. </span><span class="content">The <code><a data-link-type="element" href="obsolete.html#elementdef-marquee" id="ref-for-elementdef-marquee-3">marquee</a></code> element</span><a class="self-link" href="rendering.html#the-marquee-element-rendering"></a></h4>
    <p>When the <i>marquee</i> binding applies to a <code><a data-link-type="element" href="obsolete.html#elementdef-marquee" id="ref-for-elementdef-marquee-4">marquee</a></code> element, while the
  element is <a data-link-type="dfn" href="obsolete.html#turned-on" id="ref-for-turned-on-1">turned on</a>, the element is expected to render in
  an animated fashion according to its attributes as follows:</p>
    <dl>
     <dt>If the element’s <code><a data-link-type="element-sub" href="obsolete.html#element-attrdef-marquee-behavior" id="ref-for-element-attrdef-marquee-behavior-1">behavior</a></code> attribute is in the <a data-link-type="state" href="obsolete.html#statedef-marquee-behavior-scroll" id="ref-for-statedef-marquee-behavior-scroll-1">scroll</a> state
     </dt><dd>
      <p>Slide the contents of the element in the direction described by the <code><a data-link-type="element-sub" href="obsolete.html#element-attrdef-marquee-direction" id="ref-for-element-attrdef-marquee-direction-1">direction</a></code> attribute as defined below, such that it begins
    off the start side of the <code><a data-link-type="element" href="obsolete.html#elementdef-marquee" id="ref-for-elementdef-marquee-5">marquee</a></code>, and ends flush with the inner end side.</p>
      <p class="example" id="example-7b93b0fb"><a class="self-link" href="rendering.html#example-7b93b0fb"></a> For example, if the <code><a data-link-type="element-sub" href="obsolete.html#element-attrdef-marquee-direction" id="ref-for-element-attrdef-marquee-direction-2">direction</a></code> attribute is <a data-link-type="attr-value" href="rendering.html#attr-valuedef-marquee-direction-left" id="ref-for-attr-valuedef-marquee-direction-left-1"><code>left</code></a> (the default), then the
    contents would start such that their left edge are off the side of the right edge of the <code>marquee</code>’s content area, and the contents would then slide up to the point where the
    left edge of the contents are flush with the left inner edge of the <code>marquee</code>’s
    content area. </p>
      <p>Once the animation has ended, the user agent is expected to <a data-link-type="dfn" href="obsolete.html#increment-the-marquee-current-loop-index" id="ref-for-increment-the-marquee-current-loop-index-1">increment the marquee
    current loop index</a>. If the element is still <a data-link-type="dfn" href="obsolete.html#turned-on" id="ref-for-turned-on-2">turned
    on</a> after this, then the user agent is expected to restart the animation.</p>
     </dd><dt>If the element’s <code><a data-link-type="element-sub" href="obsolete.html#element-attrdef-marquee-behavior" id="ref-for-element-attrdef-marquee-behavior-2">behavior</a></code> attribute is in the <a data-link-type="state" href="obsolete.html#statedef-marquee-behavior-slide" id="ref-for-statedef-marquee-behavior-slide-1">slide</a> state
     </dt><dd>
      <p>Slide the contents of the element in the direction described by the <code><a data-link-type="element-sub" href="obsolete.html#element-attrdef-marquee-direction" id="ref-for-element-attrdef-marquee-direction-3">direction</a></code> attribute as defined below, such that it begins
    off the start side of the <code><a data-link-type="element" href="obsolete.html#elementdef-marquee" id="ref-for-elementdef-marquee-6">marquee</a></code>, and ends off the end side of the <code><a data-link-type="element" href="obsolete.html#elementdef-marquee" id="ref-for-elementdef-marquee-7">marquee</a></code>.</p>
      <p class="example" id="example-427172e0"><a class="self-link" href="rendering.html#example-427172e0"></a> For example, if the <code><a data-link-type="element-sub" href="obsolete.html#element-attrdef-marquee-direction" id="ref-for-element-attrdef-marquee-direction-4">direction</a></code> attribute is <a data-link-type="attr-value" href="rendering.html#attr-valuedef-marquee-direction-left" id="ref-for-attr-valuedef-marquee-direction-left-2"><code>left</code></a> (the default), then the
    contents would start such that their left edge are off the side of the right edge of the <code><a data-link-type="element" href="obsolete.html#elementdef-marquee" id="ref-for-elementdef-marquee-8">marquee</a></code>'s content area, and the contents would then slide up to the point where the <em>right</em> edge of the contents are flush with the left inner edge of the <code><a data-link-type="element" href="obsolete.html#elementdef-marquee" id="ref-for-elementdef-marquee-9">marquee</a></code>'s content area. </p>
      <p>Once the animation has ended, the user agent is expected to <a data-link-type="dfn" href="obsolete.html#increment-the-marquee-current-loop-index" id="ref-for-increment-the-marquee-current-loop-index-2">increment the marquee
    current loop index</a>. If the element is still <a data-link-type="dfn" href="obsolete.html#turned-on" id="ref-for-turned-on-3">turned
    on</a> after this, then the user agent is expected to restart the animation.</p>
     </dd><dt>If the element’s <code><a data-link-type="element-sub" href="obsolete.html#element-attrdef-marquee-behavior" id="ref-for-element-attrdef-marquee-behavior-3">behavior</a></code> attribute is in the <a data-link-type="state" href="obsolete.html#statedef-marquee-behavior-alternate" id="ref-for-statedef-marquee-behavior-alternate-1">alternate</a> state
     </dt><dd>
      <p>When the <a data-link-type="dfn" href="obsolete.html#marquee-current-loop-index" id="ref-for-marquee-current-loop-index-1">marquee current loop index</a> is even (or zero), slide the contents of the
    element in the direction described by the <code><a data-link-type="element-sub" href="obsolete.html#element-attrdef-marquee-direction" id="ref-for-element-attrdef-marquee-direction-5">direction</a></code> attribute as defined below, such that it begins flush with the start side of the <code><a data-link-type="element" href="obsolete.html#elementdef-marquee" id="ref-for-elementdef-marquee-10">marquee</a></code>, and ends flush with the end side of the <code><a data-link-type="element" href="obsolete.html#elementdef-marquee" id="ref-for-elementdef-marquee-11">marquee</a></code>.</p>
      <p>When the <a data-link-type="dfn" href="obsolete.html#marquee-current-loop-index" id="ref-for-marquee-current-loop-index-2">marquee current loop index</a> is odd, slide the contents of the element in
    the opposite direction than that described by the <code><a data-link-type="element-sub" href="obsolete.html#element-attrdef-marquee-direction" id="ref-for-element-attrdef-marquee-direction-6">direction</a></code> attribute as defined below, such that it begins
    flush with the end side of the <code><a data-link-type="element" href="obsolete.html#elementdef-marquee" id="ref-for-elementdef-marquee-12">marquee</a></code>, and ends flush with the start side of the <code><a data-link-type="element" href="obsolete.html#elementdef-marquee" id="ref-for-elementdef-marquee-13">marquee</a></code>.</p>
      <p class="example" id="example-6e366b19"><a class="self-link" href="rendering.html#example-6e366b19"></a> For example, if the <code><a data-link-type="element-sub" href="obsolete.html#element-attrdef-marquee-direction" id="ref-for-element-attrdef-marquee-direction-7">direction</a></code> attribute is <a data-link-type="attr-value" href="rendering.html#attr-valuedef-marquee-direction-left" id="ref-for-attr-valuedef-marquee-direction-left-3"><code>left</code></a> (the default), then the
    contents would with their right edge flush with the right inner edge of the <code>marquee</code>’s content area, and the contents would then slide up to the point where the <em>left</em> edge of the contents are flush with the left inner edge of the <code>marquee</code>’s content area. </p>
      <p>Once the animation has ended, the user agent is expected to <a data-link-type="dfn" href="obsolete.html#increment-the-marquee-current-loop-index" id="ref-for-increment-the-marquee-current-loop-index-3">increment the marquee
    current loop index</a>. If the element is still <a data-link-type="dfn" href="obsolete.html#turned-on" id="ref-for-turned-on-4">turned
    on</a> after this, then the user agent is expected to continue the animation.</p>
    </dd></dl>
    <p>The <code><a data-link-type="element-sub" href="obsolete.html#element-attrdef-marquee-direction" id="ref-for-element-attrdef-marquee-direction-8">direction</a></code> attribute has the meanings described
  in the following table:</p>
    <table>
     <thead>
      <tr>
       <th><code><a data-link-type="element-sub" href="obsolete.html#element-attrdef-marquee-direction" id="ref-for-element-attrdef-marquee-direction-9">direction</a></code> attribute state 
       </th><th>Direction of animation 
       </th><th>Start edge 
       </th><th>End edge 
       </th><th>Opposite direction 
     </th></tr></thead><tbody>
      <tr>
       <td><dfn class="dfn-paneled" data-dfn-for="marquee/direction" data-dfn-type="attr-value" data-export="" id="attr-valuedef-marquee-direction-left"><code>left</code></dfn> 
       </td><td>← Right to left 
       </td><td>Right 
       </td><td>Left 
       </td><td>→ Left to Right 
      </td></tr><tr>
       <td><dfn class="dfn-paneled" data-dfn-for="marquee/direction" data-dfn-type="attr-value" data-export="" id="attr-valuedef-marquee-direction-right"><code>right</code></dfn> 
       </td><td>→ Left to Right 
       </td><td>Left 
       </td><td>Right 
       </td><td>← Right to left 
      </td></tr><tr>
       <td><dfn class="dfn-paneled" data-dfn-for="marquee/direction" data-dfn-type="attr-value" data-export="" id="attr-valuedef-marquee-direction-up"><code>up</code></dfn> 
       </td><td>↑ Up (Bottom to Top) 
       </td><td>Bottom 
       </td><td>Top 
       </td><td>↓ Down (Top to Bottom) 
      </td></tr><tr>
       <td><dfn class="dfn-paneled" data-dfn-for="marquee/direction" data-dfn-type="attr-value" data-export="" id="attr-valuedef-marquee-direction-down"><code>down</code></dfn> 
       </td><td>↓ Down (Top to Bottom) 
       </td><td>Top 
       </td><td>Bottom 
       </td><td>↑ Up (Bottom to Top) 
    </td></tr></tbody></table>
    <p>In any case, the animation should proceed such that there is a delay given by the <a data-link-type="dfn" href="obsolete.html#marquee-scroll-interval" id="ref-for-marquee-scroll-interval-1">marquee
  scroll interval</a> between each frame, and such that the content moves at most the distance
  given by the <a data-link-type="dfn" href="obsolete.html#marquee-marquee-scroll-distance" id="ref-for-marquee-marquee-scroll-distance-1">marquee scroll distance</a> with each frame.</p>
    <p>When a <code><a data-link-type="element" href="obsolete.html#elementdef-marquee" id="ref-for-elementdef-marquee-14">marquee</a></code> element has a <code>bgcolor</code> attribute set, the value is expected to be parsed using the <a data-link-type="dfn" href="infrastructure.html#rules-for-parsing-a-legacy-color-value" id="ref-for-rules-for-parsing-a-legacy-color-value-10">rules for parsing a legacy color
  value</a>, and if that does not return an error, the user agent is expected to treat the
  attribute as a <a data-link-type="dfn" href="rendering.html#presentational-hints" id="ref-for-presentational-hints-39">presentational hint</a> setting the element’s <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/css3-background/#background-color">background-color</a> property to the resulting color.</p>
    <p>The <code>width</code> and <code>height</code> attributes on a <code><a data-link-type="element" href="obsolete.html#elementdef-marquee" id="ref-for-elementdef-marquee-15">marquee</a></code> element map to the dimension properties <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/CSS21/visudet.html#propdef-width">width</a> and <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/CSS21/visudet.html#propdef-height">height</a> on the element respectively.</p>
    <p>The <a data-link-type="dfn" href="infrastructure.html#css-intrinsic-height" id="ref-for-css-intrinsic-height-10">intrinsic height</a> of a <code><a data-link-type="element" href="obsolete.html#elementdef-marquee" id="ref-for-elementdef-marquee-16">marquee</a></code> element with its <code><a data-link-type="element-sub" href="obsolete.html#element-attrdef-marquee-direction" id="ref-for-element-attrdef-marquee-direction-10">direction</a></code> attribute in the <a data-link-type="attr-value" href="rendering.html#attr-valuedef-marquee-direction-up" id="ref-for-attr-valuedef-marquee-direction-up-1"><code>up</code></a> or <a data-link-type="attr-value" href="rendering.html#attr-valuedef-marquee-direction-down" id="ref-for-attr-valuedef-marquee-direction-down-1"><code>down</code></a> states is 200 CSS pixels.</p>
    <p>The <code>vspace</code> attribute of a <code><a data-link-type="element" href="obsolete.html#elementdef-marquee" id="ref-for-elementdef-marquee-17">marquee</a></code> element <a data-link-type="dfn" href="rendering.html#as-hints-for-the-rendering" id="ref-for-as-hints-for-the-rendering-7">maps to the dimension properties</a> <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/CSS21/box.html#propdef-margin-top">margin-top</a> and <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/CSS21/box.html#propdef-margin-bottom">margin-bottom</a> on the element. The <code>hspace</code> attribute
  of a <code><a data-link-type="element" href="obsolete.html#elementdef-marquee" id="ref-for-elementdef-marquee-18">marquee</a></code> element <a data-link-type="dfn" href="rendering.html#as-hints-for-the-rendering" id="ref-for-as-hints-for-the-rendering-8">maps to the
  dimension properties</a> <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/CSS21/box.html#propdef-margin-left">margin-left</a> and <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/CSS21/box.html#propdef-margin-right">margin-right</a> on the element.</p>
    <p>The <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/css-overflow-3/#propdef-overflow">overflow</a> property on the <code><a data-link-type="element" href="obsolete.html#elementdef-marquee" id="ref-for-elementdef-marquee-19">marquee</a></code> element is expected to be ignored; overflow
  is expected to always be hidden.</p>
    <h4 class="heading settled" data-level="10.5.12" id="the-meter-element-rendering"><span class="secno">10.5.12. </span><span class="content">The <code><a data-link-type="element" href="sec-forms.html#elementdef-meter" id="ref-for-elementdef-meter-15">meter</a></code> element</span><a class="self-link" href="rendering.html#the-meter-element-rendering"></a></h4>
    <p>When the <i>meter</i> binding applies to a <code><a data-link-type="element" href="sec-forms.html#elementdef-meter" id="ref-for-elementdef-meter-16">meter</a></code> element, the element is
  expected to render as an <span class="css">inline-block</span> box with a <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/CSS21/visudet.html#propdef-height">height</a> of "1em" and a <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/CSS21/visudet.html#propdef-width">width</a> of "5em", a <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/CSS21/visudet.html#propdef-vertical-align">vertical-align</a> of "-0.2em", and with its contents depicting a gauge.</p>
    <p>When the element is wider than it is tall (or square), the depiction is expected to be of a
  horizontal gauge, with the minimum value on the right if the <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/css-writing-modes-3/#propdef-direction">direction</a> property on this element
  has a computed value of <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css-writing-modes-3/#valdef-direction-rtl">rtl</a>, and on the left otherwise. When the element is taller than it is
  wide, it is expected to depict a vertical gauge, with the minimum value on the bottom.</p>
    <p>User agents are expected to use a presentation consistent with platform conventions for gauges,
  if any.</p>
    <p class="note" role="note"> Requirements for what must be depicted in the gauge are included in the definition
  of the <code><a data-link-type="element" href="sec-forms.html#elementdef-meter" id="ref-for-elementdef-meter-17">meter</a></code> element. </p>
    <h4 class="heading settled" data-level="10.5.13" id="the-progress-element-rendering"><span class="secno">10.5.13. </span><span class="content">The <code><a data-link-type="element" href="sec-forms.html#elementdef-progress" id="ref-for-elementdef-progress-13">progress</a></code> element</span><a class="self-link" href="rendering.html#the-progress-element-rendering"></a></h4>
    <p>When the <i>progress</i> binding applies to a <code><a data-link-type="element" href="sec-forms.html#elementdef-progress" id="ref-for-elementdef-progress-14">progress</a></code> element, the
  element is expected to render as an <span class="css">inline-block</span> box with a <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/CSS21/visudet.html#propdef-height">height</a> of "1em" and a <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/CSS21/visudet.html#propdef-width">width</a> of
  "10em", and a <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/CSS21/visudet.html#propdef-vertical-align">vertical-align</a> of "-0.2em".</p>
    <p><img alt="" class="extra" height="103" src="images/sample-progress.png" width="157"></p>
    <p>When the
  element is wider than it is tall, the element is expected to be depicted as a horizontal progress
  bar, with the start on the right and the end on the left if the <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/css-writing-modes-3/#propdef-direction">direction</a> property on this
  element has a computed value of <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css-writing-modes-3/#valdef-direction-rtl">rtl</a>, and with the start on the left and the end on the right
  otherwise. When the element is taller than it is wide, it is expected to be depicted as a vertical
  progress bar, with the lowest value on the bottom. When the element is square, it is expected to
  be depicted as a direction-independent progress widget (e.g., a circular progress ring).</p>
    <p>User agents are expected to use a presentation consistent with platform conventions for
  progress bars. In particular, user agents are expected to use different presentations for
  determinate and indeterminate progress bars. User agents are also expected to vary the
  presentation based on the dimensions of the element.</p>
    <p class="example" id="example-2e969ec9"><a class="self-link" href="rendering.html#example-2e969ec9"></a> For example, on some platforms for showing indeterminate progress there is a
  "spinner" progress indicator with square dimensions, which could be used when the element is
  square, and an indeterminate progress bar, which could be used when the element is wide. </p>
    <p class="note" role="note"> Requirements for how to determine if the progress bar is determinate or
  indeterminate, and what progress a determinate progress bar is to show, are included in the
  definition of the <code><a data-link-type="element" href="sec-forms.html#elementdef-progress" id="ref-for-elementdef-progress-15">progress</a></code> element. </p>
    <h4 class="heading settled" data-level="10.5.14" id="the-select-element-rendering"><span class="secno">10.5.14. </span><span class="content">The <code><a data-link-type="element" href="sec-forms.html#elementdef-select" id="ref-for-elementdef-select-116">select</a></code> element</span><a class="self-link" href="rendering.html#the-select-element-rendering"></a></h4>
    <p>When the <i>select</i> binding applies to a <code><a data-link-type="element" href="sec-forms.html#elementdef-select" id="ref-for-elementdef-select-117">select</a></code> element whose <code>multiple</code> attribute is present, the element is expected to
  render as a multi-select list box.</p>
    <p>When the <i>select</i> binding applies to a <code><a data-link-type="element" href="sec-forms.html#elementdef-select" id="ref-for-elementdef-select-118">select</a></code> element whose <code>multiple</code> attribute is absent, and the element’s <a data-link-type="dfn" href="sec-forms.html#display-size" id="ref-for-display-size-8">display size</a> is greater than 1, the element is expected to
  render as a single-select list box.</p>
    <p>When the element renders as a list box, it is expected to render as an <span class="css">inline-block</span> box whose <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/CSS21/visudet.html#propdef-height">height</a> is the height necessary to contain as many rows for items as given by the element’s <a data-link-type="dfn" href="sec-forms.html#display-size" id="ref-for-display-size-9">display size</a>, or four rows if the attribute is absent, and
  whose <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/CSS21/visudet.html#propdef-width">width</a> is the <a data-link-type="dfn" href="rendering.html#width-of-the-selects-labels" id="ref-for-width-of-the-selects-labels-1">width of the <code>select</code>’s labels</a> plus the width of a
  scrollbar.</p>
    <p>When the <i>select</i> binding applies to a <code><a data-link-type="element" href="sec-forms.html#elementdef-select" id="ref-for-elementdef-select-119">select</a></code> element whose <code>multiple</code> attribute is absent, and the element’s <a data-link-type="dfn" href="sec-forms.html#display-size" id="ref-for-display-size-10">display size</a> is 1, the element is expected to render as a
  one-line drop down box whose width is the <a data-link-type="dfn" href="rendering.html#width-of-the-selects-labels" id="ref-for-width-of-the-selects-labels-2">width of the <code>select</code>’s
  labels</a>.</p>
    <p>In either case (list box or drop-down box), the element’s items are expected to be the
  element’s <a data-link-type="dfn" href="sec-forms.html#list-of-options" id="ref-for-list-of-options-37">list of options</a>, with the element’s <code><a data-link-type="element" href="sec-forms.html#elementdef-optgroup" id="ref-for-elementdef-optgroup-34">optgroup</a></code> element children providing headers for groups of options where
  applicable.</p>
    <p>An <code><a data-link-type="element" href="sec-forms.html#elementdef-optgroup" id="ref-for-elementdef-optgroup-35">optgroup</a></code> element is expected to be rendered by displaying the element’s <code>label</code> attribute.</p>
    <p>An <code><a data-link-type="element" href="sec-forms.html#elementdef-option" id="ref-for-elementdef-option-120">option</a></code> element is expected to be rendered by displaying the element’s <a data-link-type="dfn" href="sec-forms.html#label" id="ref-for-label-11">label</a>, indented under its <code><a data-link-type="element" href="sec-forms.html#elementdef-optgroup" id="ref-for-elementdef-optgroup-36">optgroup</a></code> element if it
  has one.</p>
    <p>The <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport="" id="width-of-the-selects-labels">width of the <code>select</code>’s labels</dfn> is the wider of the width necessary to
  render the widest <code><a data-link-type="element" href="sec-forms.html#elementdef-optgroup" id="ref-for-elementdef-optgroup-37">optgroup</a></code>, and the width necessary to render the widest <code><a data-link-type="element" href="sec-forms.html#elementdef-option" id="ref-for-elementdef-option-121">option</a></code> element in the element’s <a data-link-type="dfn" href="sec-forms.html#list-of-options" id="ref-for-list-of-options-38">list of
  options</a> (including its indent, if any).</p>
    <p>If a <code><a data-link-type="element" href="sec-forms.html#elementdef-select" id="ref-for-elementdef-select-120">select</a></code> element contains a <a data-link-type="dfn" href="sec-forms.html#placeholder-label-option" id="ref-for-placeholder-label-option-5">placeholder label option</a>, the user
  agent is expected to render that <code>option</code> in a manner that conveys that it is a label,
  rather than a valid option of the control. This can include preventing the <a data-link-type="dfn" href="sec-forms.html#placeholder-label-option" id="ref-for-placeholder-label-option-6">placeholder label
  option</a> from being explicitly selected by the user. When the <a data-link-type="dfn" href="sec-forms.html#placeholder-label-option" id="ref-for-placeholder-label-option-7">placeholder label
  option</a>’s <a data-link-type="state" href="sec-forms.html#statedef-option-selectedness" id="ref-for-statedef-option-selectedness-42">selectedness</a> is true, the control
  is expected to be displayed in a fashion that indicates that no valid option is currently
  selected.</p>
    <p>User agents are expected to render the labels in a <code>select</code> in such a manner that
  any alignment remains consistent whether the label is being displayed as part of the page or in a
  menu control.</p>
    <h4 class="heading settled" data-level="10.5.15" id="the-textarea-element-rendering"><span class="secno">10.5.15. </span><span class="content">The <code><a data-link-type="element" href="sec-forms.html#elementdef-textarea" id="ref-for-elementdef-textarea-92">textarea</a></code> element</span><a class="self-link" href="rendering.html#the-textarea-element-rendering"></a></h4>
<pre class="highlight"><span class="n">@namespace</span> <span class="nf">url</span><span class="p">(</span><span class="s">http://www.w3.org/1999/xhtml</span><span class="p">);</span>

<span class="nt">textarea </span><span class="p">{</span> <span class="k">white-space</span><span class="p">:</span> pre-wrap<span class="p">;</span> <span class="p">}</span>
</pre>
    <p>When the <i>textarea</i> binding applies to a <code><a data-link-type="element" href="sec-forms.html#elementdef-textarea" id="ref-for-elementdef-textarea-93">textarea</a></code> element, the
  element is expected to render as an <span class="css">inline-block</span> box rendered as a multiline text field. If this
  text field provides a selection, then, when the user changes the current selection in such a
  binding, the user agent is expected to <a data-link-type="dfn" href="webappapis.html#queuing" id="ref-for-queuing-140">queue a task</a> to <a data-link-type="dfn" href="infrastructure.html#fire" id="ref-for-fire-160">fire a simple
  event</a> that bubbles named <code>select</code> at the element, using
  the <a data-link-type="dfn" href="webappapis.html#user-interaction-task-source" id="ref-for-user-interaction-task-source-12">user interaction task source</a> as the task source.</p>
    <p>If the element has a <code class="idl"><a data-link-type="idl" href="sec-forms.html#dom-htmltextareaelement-cols" id="ref-for-dom-htmltextareaelement-cols-2">cols</a></code> attribute, and parsing that
  attribute’s value using the <a data-link-type="dfn" href="infrastructure.html#parse-that-attributes-value" id="ref-for-parse-that-attributes-value-30">rules for parsing non-negative integers</a> doesn’t generate
  an error, then the user agent is expected to use the attribute as a <a data-link-type="dfn" href="rendering.html#presentational-hints" id="ref-for-presentational-hints-40">presentational hint</a> for the <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/CSS21/visudet.html#propdef-width">width</a> property on the element, with the value being
  the <a data-link-type="dfn" href="rendering.html#textarea-effective-width" id="ref-for-textarea-effective-width-1">textarea effective width</a> (as defined below). Otherwise, the user agent is
  expected to act as if it had a user-agent-level style sheet rule setting the <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/CSS21/visudet.html#propdef-width">width</a> property on
  the element to the <a data-link-type="dfn" href="rendering.html#textarea-effective-width" id="ref-for-textarea-effective-width-2">textarea effective width</a>.</p>
    <p>The <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport="" id="textarea-effective-width">textarea effective width</dfn> of a <code><a data-link-type="element" href="sec-forms.html#elementdef-textarea" id="ref-for-elementdef-textarea-94">textarea</a></code> element is <var>size</var>×<var>avg</var>&nbsp;+&nbsp;<var>sbw</var>, where <var>size</var> is the element’s <a data-link-type="dfn" href="sec-forms.html#character-width" id="ref-for-character-width-3">character width</a>, <var>avg</var> is the average
  character width of the primary font of the element, in CSS pixels, and <var>sbw</var> is
  the width of a scroll bar, in CSS pixels. (The element’s <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/css-text-3/#letter-spacing">letter-spacing</a> property does not affect
  the result.)</p>
    <p>If the element has a <code class="idl"><a data-link-type="idl" href="sec-forms.html#dom-htmltextareaelement-rows" id="ref-for-dom-htmltextareaelement-rows-2">rows</a></code> attribute, and parsing that
  attribute’s value using the <a data-link-type="dfn" href="infrastructure.html#parse-that-attributes-value" id="ref-for-parse-that-attributes-value-31">rules for parsing non-negative integers</a> doesn’t generate
  an error, then the user agent is expected to use the attribute as a <a data-link-type="dfn" href="rendering.html#presentational-hints" id="ref-for-presentational-hints-41">presentational hint</a> for the <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/CSS21/visudet.html#propdef-height">height</a> property on the element, with the value being
  the <a data-link-type="dfn" href="rendering.html#textarea-effective-height" id="ref-for-textarea-effective-height-1">textarea effective height</a> (as defined below). Otherwise, the user agent is
  expected to act as if it had a user-agent-level style sheet rule setting the <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/CSS21/visudet.html#propdef-height">height</a> property on
  the element to the <a data-link-type="dfn" href="rendering.html#textarea-effective-height" id="ref-for-textarea-effective-height-2">textarea effective height</a>.</p>
    <p>The <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport="" id="textarea-effective-height">textarea effective height</dfn> of a <code><a data-link-type="element" href="sec-forms.html#elementdef-textarea" id="ref-for-elementdef-textarea-95">textarea</a></code> element is the height in
  CSS pixels of the number of lines specified the element’s <a data-link-type="dfn" href="sec-forms.html#character-height" id="ref-for-character-height-2">character height</a>, plus the height of a scrollbar in CSS
  pixels.</p>
    <p>User agents are expected to apply the <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/css-text-3/#white-space">white-space</a> CSS property to <code><a data-link-type="element" href="sec-forms.html#elementdef-textarea" id="ref-for-elementdef-textarea-96">textarea</a></code> elements. For historical reasons, if the element has a <code>wrap</code> attribute whose value is an <a data-link-type="dfn" href="infrastructure.html#ascii-case-insensitive" id="ref-for-ascii-case-insensitive-90">ASCII
  case-insensitive</a> match for the string "<code>off</code>", then the user agent is expected to treat the attribute as a <a data-link-type="dfn" href="rendering.html#presentational-hints" id="ref-for-presentational-hints-42">presentational hint</a> setting the element’s <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/css-text-3/#white-space">white-space</a> property to <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-text-3/#valdef-white-space-pre">pre</a>.</p>
    <h4 class="heading settled" data-level="10.5.16" id="the-keygen-element-rendering"><span class="secno">10.5.16. </span><span class="content">The <code><a data-link-type="element" href="sec-forms.html#elementdef-keygen" id="ref-for-elementdef-keygen-20">keygen</a></code> element</span><a class="self-link" href="rendering.html#the-keygen-element-rendering"></a></h4>
    <p>When the <i>keygen</i> binding applies to a <code><a data-link-type="element" href="sec-forms.html#elementdef-keygen" id="ref-for-elementdef-keygen-21">keygen</a></code> element, the element
  is expected to render as an <span class="css">inline-block</span> box containing a user interface to configure the key
  pair to be generated.</p>
    <h3 class="heading settled" data-level="10.6" id="frames-and-framesets"><span class="secno">10.6. </span><span class="content">Frames and framesets</span><a class="self-link" href="rendering.html#frames-and-framesets"></a></h3>
    <p>User agent are expected to render <code><a data-link-type="element" href="obsolete.html#elementdef-frameset" id="ref-for-elementdef-frameset-15">frameset</a></code> elements as a box with the height and
  width of the <a data-link-type="dfn" href="infrastructure.html#viewport" id="ref-for-viewport-42">viewport</a>, with a surface rendered according to the following layout algorithm:</p>
    <ol>
     <li>
      <p>The <var>cols</var> and <var>rows</var> variables are lists of zero or more pairs consisting
    of a number and a unit, the unit being one of <i>percentage</i>, <i>relative</i>, and <i>absolute</i>.</p>
      <p>Use the <a data-link-type="dfn" href="infrastructure.html#rules-for-parsing-a-list-of-dimensions" id="ref-for-rules-for-parsing-a-list-of-dimensions-1">rules for parsing a list of dimensions</a> to parse the value of the
    element’s <code>cols</code> attribute, if there is one.
    Let <var>cols</var> be the result, or an empty list if there is no such attribute.</p>
      <p>Use the <a data-link-type="dfn" href="infrastructure.html#rules-for-parsing-a-list-of-dimensions" id="ref-for-rules-for-parsing-a-list-of-dimensions-2">rules for parsing a list of dimensions</a> to parse the value of the
    element’s <code>rows</code> attribute, if there is one.
    Let <var>rows</var> be the result, or an empty list if there is no such attribute.</p>
     </li><li>
      <p>For any of the entries in <var>cols</var> or <var>rows</var> that have the number zero and
    the unit <i>relative</i>, change the entry’s number to one.</p>
     </li><li>
      <p>If <var>cols</var> has no entries, then add a single entry consisting of the value 1 and the
    unit <i>relative</i> to <var>cols</var>.</p>
      <p>If <var>rows</var> has no entries, then add a single entry consisting of the value 1 and the
    unit <i>relative</i> to <var>rows</var>.</p>
     </li><li>
      <p>Invoke the algorithm defined below to <a data-link-type="dfn" href="rendering.html#convert-a-list-of-dimensions-to-a-list-of-pixel-values" id="ref-for-convert-a-list-of-dimensions-to-a-list-of-pixel-values-1">convert a list of dimensions to a list of pixel
    values</a> using <var>cols</var> as the input list, and the width of the surface that the <code>frameset</code> is being rendered into, in CSS pixels, as the input dimension. Let <var>sized cols</var> be the resulting list.</p>
      <p>Invoke the algorithm defined below to <a data-link-type="dfn" href="rendering.html#convert-a-list-of-dimensions-to-a-list-of-pixel-values" id="ref-for-convert-a-list-of-dimensions-to-a-list-of-pixel-values-2">convert a list of dimensions to a list of pixel
    values</a> using <var>rows</var> as the input list, and the height of the surface that the <code>frameset</code> is being rendered into, in CSS pixels, as the input dimension. Let <var>sized rows</var> be the resulting list.</p>
     </li><li>
      <p>Split the surface into a grid of <var>w</var>×<var>h</var> rectangles, where <var>w</var> is the number of entries in <var>sized cols</var> and <var>h</var> is the number of entries in <var>sized rows</var>.</p>
      <p>Size the columns so that each column in the grid is as many CSS pixels wide as the
    corresponding entry in the <var>sized cols</var> list.</p>
      <p>Size the rows so that each row in the grid is as many CSS pixels high as the corresponding
    entry in the <var>sized rows</var> list.</p>
     </li><li>
      <p>Let <var>children</var> be the list of <code>frame</code> and <code><a data-link-type="element" href="obsolete.html#elementdef-frameset" id="ref-for-elementdef-frameset-16">frameset</a></code> elements
    that are children of the <code><a data-link-type="element" href="obsolete.html#elementdef-frameset" id="ref-for-elementdef-frameset-17">frameset</a></code> element for which the algorithm was invoked.</p>
     </li><li>
      <p>For each row of the grid of rectangles created in the previous step, from top to bottom, run
    these substeps:</p>
      <ol>
       <li>
        <p>For each rectangle in the row, from left to right, run these substeps:</p>
        <ol>
         <li>
          <p>If there are any elements left in <var>children</var>, take the first element in the
        list, and assign it to the rectangle.</p>
          <p>If this is a <code><a data-link-type="element" href="obsolete.html#elementdef-frameset" id="ref-for-elementdef-frameset-18">frameset</a></code> element, then recurse the entire <code>frameset</code> layout algorithm for that <code><a data-link-type="element" href="obsolete.html#elementdef-frameset" id="ref-for-elementdef-frameset-19">frameset</a></code> element, with the rectangle as the
        surface.</p>
          <p>Otherwise, it is a <code><a data-link-type="element" href="obsolete.html#elementdef-frame" id="ref-for-elementdef-frame-6">frame</a></code> element; render its <a data-link-type="dfn" href="browsers.html#nested-browsing-contexts" id="ref-for-nested-browsing-contexts-87">nested browsing context</a>, positioned and sized to fit the rectangle.</p>
         </li><li>
          <p>If there are any elements left in <var>children</var>, remove the first element from <var>children</var>.</p>
        </li></ol>
      </li></ol>
     </li><li>
      <p>If the <code><a data-link-type="element" href="obsolete.html#elementdef-frameset" id="ref-for-elementdef-frameset-20">frameset</a></code> element <a data-link-type="dfn" href="rendering.html#has-a-border" id="ref-for-has-a-border-1">has a border</a>, draw an outer set of borders
    around the rectangles, using the element’s <a data-link-type="dfn" href="rendering.html#frame-border-color" id="ref-for-frame-border-color-1">frame border color</a>.</p>
      <p>For each rectangle, if there is an element assigned to that rectangle, and that element <a data-link-type="dfn" href="rendering.html#has-a-border" id="ref-for-has-a-border-2">has a border</a>, draw an inner set of borders around that rectangle, using the
    element’s <a data-link-type="dfn" href="rendering.html#frame-border-color" id="ref-for-frame-border-color-2">frame border color</a>.</p>
      <p>For each (visible) border that does not abut a rectangle that is assigned a <code><a data-link-type="element" href="obsolete.html#elementdef-frame" id="ref-for-elementdef-frame-7">frame</a></code> element with a <code>noresize</code> attribute (including rectangles in further nested <code><a data-link-type="element" href="obsolete.html#elementdef-frameset" id="ref-for-elementdef-frameset-21">frameset</a></code> elements), the user
    agent is expected to allow the user to move the border, resizing the rectangles within, keeping
    the proportions of any nested <code>frameset</code> grids.</p>
      <p>A <code>frameset</code> or <code><a data-link-type="element" href="obsolete.html#elementdef-frame" id="ref-for-elementdef-frame-8">frame</a></code> element <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport="" id="has-a-border">has a border</dfn> if the
    following algorithm returns true:</p>
      <ol>
       <li>If the element has a <code>frameborder</code> attribute whose value is not the
      empty string and whose first character is either a U+0031 DIGIT ONE (1) character, a U+0079
      LATIN SMALL LETTER Y character (y), or a U+0059 LATIN CAPITAL LETTER Y character (Y), then
      return true.
       </li><li>Otherwise, if the element has a <code>frameborder</code> attribute, return
      false.
       </li><li>Otherwise, if the element has a parent element that is a <code><a data-link-type="element" href="obsolete.html#elementdef-frameset" id="ref-for-elementdef-frameset-22">frameset</a></code> element,
      then return true if <em>that</em> element <a data-link-type="dfn" href="rendering.html#has-a-border" id="ref-for-has-a-border-3">has a border</a>, and false if it does
      not.
       </li><li>Otherwise, return true.
      </li></ol>
      <p>The <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport="" id="frame-border-color">frame border color</dfn> of a <code>frameset</code> or <code><a data-link-type="element" href="obsolete.html#elementdef-frame" id="ref-for-elementdef-frame-9">frame</a></code> element
    is the color obtained from the following algorithm:</p>
      <ol>
       <li>If the element has a <code>bordercolor</code> attribute, and applying the <a data-link-type="dfn" href="infrastructure.html#rules-for-parsing-a-legacy-color-value" id="ref-for-rules-for-parsing-a-legacy-color-value-11">rules for parsing a legacy color value</a> to that attribute’s value does not result
      in an error, then return the color so obtained.
       </li><li>Otherwise, if the element has a parent element that is a <code><a data-link-type="element" href="obsolete.html#elementdef-frameset" id="ref-for-elementdef-frameset-23">frameset</a></code> element,
      then return the <a data-link-type="dfn" href="rendering.html#frame-border-color" id="ref-for-frame-border-color-3">frame border color</a> of that element. 
       </li><li>Otherwise, return gray.
      </li></ol>
    </li></ol>
    <p>The algorithm to <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport="" id="convert-a-list-of-dimensions-to-a-list-of-pixel-values">convert a list of dimensions to a list of pixel values</dfn> consists of
  the following steps:</p>
    <ol>
     <li>
      <p>Let <var>input list</var> be the list of numbers and units passed to the algorithm.</p>
      <p>Let <var>output list</var> be a list of numbers the same length as <var>input list</var>, all
    zero.</p>
      <p>Entries in <var>output list</var> correspond to the entries in <var>input list</var> that
    have the same position.</p>
     </li><li>Let <var>input dimension</var> be the size passed to the algorithm. 
     </li><li>
      <p>Let <var>count percentage</var> be the number of entries in <var>input list</var> whose unit
    is <i>percentage</i>.</p>
      <p>Let <var>total percentage</var> be the sum of all the numbers in <var>input list</var> whose
    unit is <i>percentage</i>.</p>
      <p>Let <var>count relative</var> be the number of entries in <var>input list</var> whose unit is <i>relative</i>.</p>
      <p>Let <var>total relative</var> be the sum of all the numbers in <var>input list</var> whose
    unit is <i>relative</i>.</p>
      <p>Let <var>count absolute</var> be the number of entries in <var>input list</var> whose unit is <i>absolute</i>.</p>
      <p>Let <var>total absolute</var> be the sum of all the numbers in <var>input list</var> whose
    unit is <i>absolute</i>.</p>
      <p>Let <var>remaining space</var> be the value of <var>input dimension</var>.</p>
     </li><li>
      <p>If <var>total absolute</var> is greater than <var>remaining space</var>, then for each entry
    in <var>input list</var> whose unit is <i>absolute</i>, set the corresponding value in <var>output list</var> to the number of the entry in <var>input list</var> multiplied by <var>remaining space</var> and divided by <var>total absolute</var>. Then, set <var>remaining
    space</var> to zero.</p>
      <p>Otherwise, for each entry in <var>input list</var> whose unit is <i>absolute</i>, set the
    corresponding value in <var>output list</var> to the number of the entry in <var>input
    list</var>. Then, decrement <var>remaining space</var> by <var>total absolute</var>.</p>
     </li><li>
      <p>If <var>total percentage</var> multiplied by the <var>input dimension</var> and divided by
    100 is greater than <var>remaining space</var>, then for each entry in <var>input list</var> whose unit is <i>percentage</i>, set the corresponding value in <var>output list</var> to the
    number of the entry in <var>input list</var> multiplied by <var>remaining space</var> and
    divided by <var>total percentage</var>. Then, set <var>remaining space</var> to zero.</p>
      <p>Otherwise, for each entry in <var>input list</var> whose unit is <i>percentage</i>, set the
    corresponding value in <var>output list</var> to the number of the entry in <var>input
    list</var> multiplied by the <var>input dimension</var> and divided by 100. Then, decrement <var>remaining space</var> by <var>total percentage</var> multiplied by the <var>input
    dimension</var> and divided by 100.</p>
     </li><li>
      <p>For each entry in <var>input list</var> whose unit is <i>relative</i>, set the corresponding
    value in <var>output list</var> to the number of the entry in <var>input list</var> multiplied
    by <var>remaining space</var> and divided by <var>total relative</var>.</p>
     </li><li>Return <var>output list</var>.
    </li></ol>
    <p>User agents working with integer values for frame widths (as opposed to user agents that can
  lay frames out with subpixel accuracy) are expected to distribute the remainder first to the last
  entry whose unit is <i>relative</i>, then equally (not proportionally) to each entry whose unit is <i>percentage</i>, then equally (not proportionally) to each entry whose unit is <i>absolute</i>,
  and finally, failing all else, to the last entry.</p>
    <hr>
    <p>The contents of a <code><a data-link-type="element" href="obsolete.html#elementdef-frame" id="ref-for-elementdef-frame-10">frame</a></code> element that does not have a <code>frameset</code> parent
  are expected to be rendered as transparent black; the user agent is expected to not render the <a data-link-type="dfn" href="browsers.html#nested-browsing-contexts" id="ref-for-nested-browsing-contexts-88">nested browsing context</a> in this case, and that <a data-link-type="dfn" href="browsers.html#nested-browsing-contexts" id="ref-for-nested-browsing-contexts-89">nested browsing context</a> is expected to have a <a data-link-type="dfn" href="infrastructure.html#viewport" id="ref-for-viewport-43">viewport</a> with zero width and zero height.</p>
    <h3 class="heading settled" data-level="10.7" id="interactive-media"><span class="secno">10.7. </span><span class="content">Interactive media</span><a class="self-link" href="rendering.html#interactive-media"></a></h3>
    <h4 class="heading settled" data-level="10.7.1" id="links-forms-and-navigation"><span class="secno">10.7.1. </span><span class="content">Links, forms, and navigation</span><a class="self-link" href="rendering.html#links-forms-and-navigation"></a></h4>
    <p>User agents are expected to allow the user to control aspects of <a data-link-type="dfn" href="links.html#hyperlink" id="ref-for-hyperlink-62">hyperlink</a> activation and <a href="sec-forms.html#forms-form-submission">§4.10.22 Form submission</a>, such as which <a data-link-type="dfn" href="browsers.html#browsing-context" id="ref-for-browsing-context-331">browsing context</a> is to be
  used for the subsequent <a data-link-type="dfn" href="browsers.html#navigated" id="ref-for-navigated-95">navigation</a>.</p>
    <p>User agents are expected to allow users to discover the destination of <a data-link-type="dfn" href="links.html#hyperlink" id="ref-for-hyperlink-63">hyperlinks</a> and of <a data-link-type="dfn" href="sec-forms.html#forms" id="ref-for-forms-2">forms</a> before triggering their <a data-link-type="dfn" href="browsers.html#navigated" id="ref-for-navigated-96">navigation</a>.</p>
    <p>User agents may allow users to <a data-link-type="dfn" href="browsers.html#navigated" id="ref-for-navigated-97">navigate</a> <a data-link-type="dfn" href="browsers.html#browsing-context" id="ref-for-browsing-context-332">browsing contexts</a> to the URLs indicated by the <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-cite" id="ref-for-elementdef-cite-18">cite</a></code> attributes on <code><a data-link-type="element" href="textlevel-semantics.html#elementdef-q" id="ref-for-elementdef-q-19">q</a></code>, <code><a data-link-type="element" href="grouping-content.html#elementdef-blockquote" id="ref-for-elementdef-blockquote-18">blockquote</a></code>, <code><a data-link-type="element" href="edits.html#elementdef-ins" id="ref-for-elementdef-ins-23">ins</a></code>, and <code><a data-link-type="element" href="edits.html#elementdef-del" id="ref-for-elementdef-del-27">del</a></code> elements.</p>
    <p>User agents may surface <a data-link-type="dfn" href="links.html#hyperlink" id="ref-for-hyperlink-64">hyperlinks</a> created by <code>link</code> elements in their user
  interface.</p>
    <p class="note" role="note"> While <code><a data-link-type="element" href="document-metadata.html#elementdef-link" id="ref-for-elementdef-link-69">link</a></code> elements that create <a data-link-type="dfn" href="links.html#hyperlink" id="ref-for-hyperlink-65">hyperlinks</a> will match the ':link' or ':visited' pseudo-classes, will
    react to clicks if visible, and so forth, this does not extend to any browser interface constructs
    that expose those same links. Activating a link through the browser’s interface, rather than in
    the page itself, does not trigger <code>click</code> events and the like. </p>
    <h4 class="heading settled" data-level="10.7.2" id="interactive-media-the-title-attribute"><span class="secno">10.7.2. </span><span class="content">The <code>title</code> attribute</span><a class="self-link" href="rendering.html#interactive-media-the-title-attribute"></a></h4>
    <p>User agents are expected to expose the <a data-link-type="dfn" href="dom.html#advisory-information" id="ref-for-advisory-information-3">advisory information</a> of elements upon user
  request, and to make the user aware of the presence of such information.</p>
    <p>On interactive graphical systems where the user can use a pointing device, this could take the
  form of a tooltip. When the user is unable to use a pointing device, then the user agent is
  expected to make the content available in some other fashion, e.g., by making the element a <i>focusable area</i> and always displaying the <a data-link-type="dfn" href="dom.html#advisory-information" id="ref-for-advisory-information-4">advisory information</a> of the currently <a data-link-type="dfn" href="editing.html#focused" id="ref-for-focused-12">focused</a> element, or by showing the <a data-link-type="dfn" href="dom.html#advisory-information" id="ref-for-advisory-information-5">advisory information</a> of the elements
  under the user’s finger on a touch device as the user pans around the screen.</p>
    <p>U+000A LINE FEED (LF) characters are expected to cause line breaks in the tooltip; U+0009
  CHARACTER TABULATION (tab) characters are expected to render as a non-zero horizontal shift that
  lines up the next glyph with the next tab stop, with tab stops occurring at points that are
  multiples of 8 times the width of a U+0020 SPACE character.</p>
    <div class="example" id="example-fbc4c033"><a class="self-link" href="rendering.html#example-fbc4c033"></a> For example, a visual user agent could make elements with a <code>title</code> attribute <a data-link-type="dfn" href="editing.html#focusable" id="ref-for-focusable-72">focusable</a>, and could make any <a data-link-type="dfn" href="editing.html#focused" id="ref-for-focused-13">focused</a> element with a <code>title</code> attribute show its tooltip under the element while the
    element has focus. This would allow a user to tab around the document to find all the advisory
    text. </div>
    <div class="example" id="example-28fe358e"><a class="self-link" href="rendering.html#example-28fe358e"></a> As another example, a screen reader could provide an audio cue when reading an element with a
    tooltip, with an associated key to read the last tooltip for which a cue was played. </div>
    <h4 class="heading settled" data-level="10.7.3" id="editing-hosts"><span class="secno">10.7.3. </span><span class="content">Editing hosts</span><a class="self-link" href="rendering.html#editing-hosts"></a></h4>
    <p>The current text editing caret (i.e., the <a data-link-type="dfn" href="editing.html#active-range" id="ref-for-active-range-2">active range</a>, if it is empty and in an <a data-link-type="dfn" href="editing.html#editing-host" id="ref-for-editing-host-13">editing host</a>), if any, is expected to act like an inline <a data-link-type="dfn" href="infrastructure.html#replaced-element" id="ref-for-replaced-element-9">replaced element</a> with the vertical dimensions of the caret and with zero width for
  the purposes of the CSS rendering model.</p>
    <p class="note" role="note"> This means that even an empty block can have the caret inside it, and that when
    the caret is in such an element, it prevents margins from collapsing through the element. </p>
    <h4 class="heading settled" data-level="10.7.4" id="text-rendered-in-native-user-interfaces"><span class="secno">10.7.4. </span><span class="content">Text rendered in native user interfaces</span><a class="self-link" href="rendering.html#text-rendered-in-native-user-interfaces"></a></h4>
    <p>User agents are expected to honor the Unicode semantics of text that is exposed in user
  interfaces, for example supporting the bidirectional algorithm in text shown in dialogs, title
  bars, pop-up menus, and tooltips. Text from the contents of elements is expected to be rendered in
  a manner that honors <a data-link-type="dfn" href="dom.html#directionality" id="ref-for-directionality-30">the directionality</a> of the element from which the text was
  obtained. Text from attributes is expected to be rendered in a manner that honours the <a data-link-type="dfn" href="dom.html#directionality-of-the-attribute" id="ref-for-directionality-of-the-attribute-4">directionality of the attribute</a>.</p>
    <div class="example" id="example-7b550d8f">
     <a class="self-link" href="rendering.html#example-7b550d8f"></a> Consider the following markup, which has Hebrew text asking for a programming language, the
    languages being text for which a left-to-right direction is important given the punctuation in
    some of their names: 
<pre class="highlight"><span class="nt">&lt;p</span> <span class="na">dir=</span><span class="s">"rtl"</span> <span class="na">lang=</span><span class="s">"he"</span><span class="nt">&gt;</span>
<span class="nt">&lt;label&gt;</span>
בחר שפת תכנות:
<span class="nt">&lt;select&gt;</span>
  <span class="nt">&lt;option</span> <span class="na">dir=</span><span class="s">"ltr"</span><span class="nt">&gt;</span>C++<span class="nt">&lt;/option&gt;</span>
  <span class="nt">&lt;option</span> <span class="na">dir=</span><span class="s">"ltr"</span><span class="nt">&gt;</span>C#<span class="nt">&lt;/option&gt;</span>
  <span class="nt">&lt;option</span> <span class="na">dir=</span><span class="s">"ltr"</span><span class="nt">&gt;</span>FreePascal<span class="nt">&lt;/option&gt;</span>
  <span class="nt">&lt;option</span> <span class="na">dir=</span><span class="s">"ltr"</span><span class="nt">&gt;</span>F#<span class="nt">&lt;/option&gt;</span>
<span class="nt">&lt;/select&gt;</span>
<span class="nt">&lt;/label&gt;</span>
<span class="nt">&lt;/p&gt;</span>
</pre>
     <p>If the <code><a data-link-type="element" href="sec-forms.html#elementdef-select" id="ref-for-elementdef-select-121">select</a></code> element was rendered as a drop down box, a correct rendering would
    ensure that the punctuation was the same both in the drop down, and in the box showing the
    current selection.</p>
     <p><img alt="" height="105" src="images/bidiselect.png" width="206"></p>
    </div>
    <div class="example" id="example-ad64cedc">
     <a class="self-link" href="rendering.html#example-ad64cedc"></a> The directionality of attributes depends on the attribute and on the element’s <code>dir</code> attribute, as the following example demonstrates. Consider this
    markup: 
<pre class="highlight"><span class="nt">&lt;table&gt;</span>
<span class="nt">&lt;tr&gt;</span>
<span class="nt">&lt;th</span> <span class="na">abbr=</span><span class="s">"(א"</span> <span class="na">dir=</span><span class="s">ltr</span><span class="nt">&gt;</span>A
<span class="nt">&lt;th</span> <span class="na">abbr=</span><span class="s">"(א"</span> <span class="na">dir=</span><span class="s">rtl</span><span class="nt">&gt;</span>A
<span class="nt">&lt;th</span> <span class="na">abbr=</span><span class="s">"(א"</span> <span class="na">dir=</span><span class="s">auto</span><span class="nt">&gt;</span>A
<span class="nt">&lt;/table&gt;</span>
</pre>
     <p>If the <code>abbr</code> attributes are rendered, e.g., in a tooltip or
    other user interface, the first will have a left parenthesis (because the direction is <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css-writing-modes-3/#valdef-direction-ltr">ltr</a>),
    the second will have a right parenthesis (because the direction is <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css-writing-modes-3/#valdef-direction-rtl">rtl</a>), and the third will
    have a right parenthesis (because the direction is determined <em>from the attribute value</em> to be <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css-writing-modes-3/#valdef-direction-rtl">rtl</a>).</p>
     <p>However, if instead the attribute was not a <a data-link-type="dfn" href="dom.html#directionality-capable-attributes" id="ref-for-directionality-capable-attributes-2">directionality-capable attribute</a>, the
    results would be different:</p>
<pre class="highlight"><span class="nt">&lt;table&gt;</span>
<span class="nt">&lt;tr&gt;</span>
<span class="nt">&lt;th&gt;</span>A
<span class="nt">&lt;th&gt;</span>A
<span class="nt">&lt;th&gt;</span>A
<span class="nt">&lt;/table&gt;</span>
</pre>
     <p>In this case, if the user agent were to expose the <code>data-abbr</code> attribute
    in the user interface (e.g., in a debugging environment), the last case would be rendered with a <em>left</em> parenthesis, because the direction would be determined from the element’s
    contents.</p>
    </div>
    <p>A string provided by a script (e.g., the argument to <code>window.alert()</code>) is expected to be treated as an independent set of one or
  more bidirectional algorithm paragraphs when displayed, as defined by the bidirectional algorithm,
  including, for instance, supporting the paragraph-breaking behavior of U+000A LINE FEED (LF)
  characters. For the purposes of determining the paragraph level of such text in the bidirectional
  algorithm, this specification does <em>not</em> provide a higher-level override of rules P2 and
  P3. <a data-link-type="biblio" href="references.html#biblio-bidi">[BIDI]</a></p>
    <p>When necessary, authors can enforce a particular direction for a given paragraph by starting it
  with the Unicode U+200E LEFT-TO-RIGHT MARK or U+200F RIGHT-TO-LEFT MARK characters.</p>
    <div class="example" id="example-a4978387">
     <a class="self-link" href="rendering.html#example-a4978387"></a> Thus, the following script: 
<pre class="highlight"><span class="nx">alert</span><span class="p">(</span><span class="s1">'\u05DC\u05DE\u05D3 HTML \u05D4\u05D9\u05D5\u05DD!'</span><span class="p">)</span>
</pre>
     <p>...would always result in a message reading
        "<bdo dir="rtl" lang="">למד&nbsp;LMTH&nbsp;היום!</bdo>"
    (not "<bdo dir="ltr" lang="">דמל&nbsp;HTML&nbsp;םויה!</bdo>"),
    regardless of the language of the user agent interface or the
    direction of the page or any of its elements.</p>
    </div>
    <div class="example" id="example-8349cea9">
     <a class="self-link" href="rendering.html#example-8349cea9"></a> For a more complex example, consider the following script: 
<pre class="bad highlight"><span class="cm">/* Warning: this script does not handle right-to-left scripts correctly */</span>
<span class="kd">var</span> <span class="nx">s</span><span class="p">;</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">s</span> <span class="o">=</span> <span class="nx">prompt</span><span class="p">(</span><span class="s1">'What is your name?'</span><span class="p">))</span> <span class="p">{</span>
  <span class="nx">alert</span><span class="p">(</span><span class="nx">s</span> <span class="o">+</span> <span class="s1">'! Ok, Fred, '</span> <span class="o">+</span> <span class="nx">s</span> <span class="o">+</span> <span class="s1">', and Wilma will get the car.'</span><span class="p">);</span>
<span class="p">}</span>
</pre>
     <p>When the user enters "<kbd>Kitty</kbd>", the user agent would alert "<samp>Kitty! Ok, Fred,
    Kitty, and Wilma will get the car.</samp>". However, if the user enters "<kbd dir="rtl" lang="ar">لا&nbsp;أفهم</kbd>", then the bidirectional
    algorithm will determine that the direction of the paragraph is right-to-left, and so the output
    will be the following unintended mess: "<samp lang=""><bdo dir="rtl">لا&nbsp;أفهم!&nbsp;derF&nbsp;,kO,&nbsp;لا&nbsp;أفهم,&nbsp;rac&nbsp;eht&nbsp;teg&nbsp;lliw&nbsp;amliW&nbsp;dna.</bdo></samp>"</p>
     <p>To force an alert that starts with user-provided text (or other text of unknown
    directionality) to render left-to-right, the string can be prefixed with a U+200E LEFT-TO-RIGHT
    MARK character:</p>
<pre class="highlight"><span class="kd">var</span> <span class="nx">s</span><span class="p">;</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">s</span> <span class="o">=</span> <span class="nx">prompt</span><span class="p">(</span><span class="s1">'What is your name?'</span><span class="p">))</span> <span class="p">{</span>
  <span class="nx">alert</span><span class="p">(</span><span class="s1">'\u200E'</span> <span class="o">+</span> <span class="nx">s</span> <span class="o">+</span> <span class="s1">'! Ok, Fred, '</span> <span class="o">+</span> <span class="nx">s</span> <span class="o">+</span> <span class="s1">', and Wilma will get the car.'</span><span class="p">);</span>
<span class="p">}</span>
</pre>
    </div>
    <h3 class="heading settled" data-level="10.8" id="print-media"><span class="secno">10.8. </span><span class="content">Print media</span><a class="self-link" href="rendering.html#print-media"></a></h3>
    <p>User agents are expected to allow the user to request the opportunity to <dfn class="dfn-paneled" data-dfn-type="dfn" data-lt="obtain a physical form" data-noexport="" id="obtain-a-physical-form">obtain a physical
  form</dfn> (or a representation of a physical form) of a <code class="idl"><a data-link-type="idl" href="https://www.w3.org/TR/dom/#document">Document</a></code>. For example,
  selecting the option to print a page or convert it to PDF format. <a data-link-type="biblio" href="references.html#biblio-pdf">[PDF]</a></p>
    <p>When the user actually <a data-link-type="dfn" href="rendering.html#obtain-a-physical-form" id="ref-for-obtain-a-physical-form-3">obtains a physical form</a> (or
  a representation of a physical form) of a <code class="idl"><a data-link-type="idl" href="https://www.w3.org/TR/dom/#document">Document</a></code>, the user agent is expected to
  create a new rendering of the <code class="idl"><a data-link-type="idl" href="https://www.w3.org/TR/dom/#document">Document</a></code> for the print media.</p>
    <h3 class="heading settled" data-level="10.9" id="unstyled-xml-documents"><span class="secno">10.9. </span><span class="content">Unstyled XML documents</span><a class="self-link" href="rendering.html#unstyled-xml-documents"></a></h3>
    <p>HTML user agents may, in certain circumstances, find themselves rendering non-HTML documents
  that use vocabularies for which they lack any built-in knowledge. This section provides for a way
  for user agents to handle such documents in a somewhat useful manner.</p>
    <p>While a <code class="idl"><a data-link-type="idl" href="https://www.w3.org/TR/dom/#document">Document</a></code> is an <a data-link-type="dfn" href="rendering.html#unstyled-document" id="ref-for-unstyled-document-1">unstyled document</a>, the user agent is expected
  to render <a data-link-type="dfn" href="rendering.html#an-unstyled-document-view" id="ref-for-an-unstyled-document-view-1">an unstyled document view</a>.</p>
    <p>A <code class="idl"><a data-link-type="idl" href="https://www.w3.org/TR/dom/#document">Document</a></code> is an <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport="" id="unstyled-document">unstyled document</dfn> while it matches the following
  conditions:</p>
    <ul>
     <li>The <code class="idl"><a data-link-type="idl" href="https://www.w3.org/TR/dom/#document">Document</a></code> has no author style sheets (whether referenced by HTTP headers, processing instructions, elements like <code><a data-link-type="element" href="document-metadata.html#elementdef-link" id="ref-for-elementdef-link-70">link</a></code>, inline elements like <code><a data-link-type="element" href="document-metadata.html#elementdef-style" id="ref-for-elementdef-style-36">style</a></code>, or any other mechanism). 
     </li><li>None of the elements in the <code class="idl"><a data-link-type="idl" href="https://www.w3.org/TR/dom/#document">Document</a></code> have any <a data-link-type="dfn" href="rendering.html#presentational-hints" id="ref-for-presentational-hints-43">presentational hints</a>. 
     </li><li>None of the elements in the <code class="idl"><a data-link-type="idl" href="https://www.w3.org/TR/dom/#document">Document</a></code> have any <a data-link-type="dfn" href="https://www.w3.org/TR/css-style-attr/#syntax">CSS styling attributes</a>. 
     </li><li>None of the elements in the <code class="idl"><a data-link-type="idl" href="https://www.w3.org/TR/dom/#document">Document</a></code> are in any of the following namespaces: <a data-link-type="dfn" href="infrastructure.html#html-namespace" id="ref-for-html-namespace-46">HTML namespace</a>, <a data-link-type="dfn" href="infrastructure.html#svg-namespace" id="ref-for-svg-namespace-22">SVG namespace</a>, <a data-link-type="dfn" href="infrastructure.html#mathml-namespace" id="ref-for-mathml-namespace-22">MathML namespace</a> 
     </li><li>The <code class="idl"><a data-link-type="idl" href="https://www.w3.org/TR/dom/#document">Document</a></code> has no <i>focusable area</i> (e.g., from XLink) other than the <a data-link-type="dfn" href="infrastructure.html#viewport" id="ref-for-viewport-44">viewport</a>. 
     </li><li>The <code class="idl"><a data-link-type="idl" href="https://www.w3.org/TR/dom/#document">Document</a></code> has no <a data-link-type="dfn" href="links.html#hyperlink" id="ref-for-hyperlink-66">hyperlinks</a> (e.g., from XLink). 
     </li><li>There exists no <a data-link-type="dfn" href="webappapis.html#concept-script" id="ref-for-concept-script-12">script</a> whose <a data-link-type="dfn" href="webappapis.html#settings-object" id="ref-for-settings-object-10">settings object</a> specifies this <code class="idl"><a data-link-type="idl" href="https://www.w3.org/TR/dom/#document">Document</a></code> as the <a data-link-type="dfn" href="webappapis.html#responsible-document" id="ref-for-responsible-document-11">responsible document</a>. 
     </li><li>None of the elements in the <code class="idl"><a data-link-type="idl" href="https://www.w3.org/TR/dom/#document">Document</a></code> have any registered event listeners. 
    </li></ul>
    <p><dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport="" id="an-unstyled-document-view">An unstyled document view</dfn> is one where the DOM is not rendered according to CSS
  (which would, since there are no applicable styles in this context, just result in a wall of
  text), but is instead rendered in a manner that is useful for a developer. This could consist of
  just showing the <code class="idl"><a data-link-type="idl" href="https://www.w3.org/TR/dom/#document">Document</a></code> object’s source, maybe with syntax highlighting, or it
  could consist of displaying just the DOM tree, or simply a message saying that the page is not a
  styled document.</p>
    <p class="note" role="note"> If a <code class="idl"><a data-link-type="idl" href="https://www.w3.org/TR/dom/#document">Document</a></code> stops being an <a data-link-type="dfn" href="rendering.html#unstyled-document" id="ref-for-unstyled-document-2">unstyled document</a>, then the
  conditions above stop applying, and thus a user agent following these requirements will switch to
  using the regular CSS rendering. </p>
   </section></main>
  
<script src="js/fixup.js"></script>
  

<p class="prev_next">← <a href="xhtml.html#xhtml"><span class="secno">9</span> <span class="content"><span>The XHTML syntax</span></span></a> — <a href="index.html#contents">Table of contents</a> — <a href="obsolete.html#obsolete"><span class="secno">11</span> <span class="content">Obsolete features</span></a> →</p></body></html>
